All geek questions in one place

Removing dynamically added row from table using jquery

My code adds a row to the table when clicking the plus and adds it with the correct links, so when I submit my form data, I know what data is. The minus for me is a little difficult to work with deleting the just added row or another row previously added from the table.

I thought maybe its my .bind in this last line of the addRow function, as I saw here, maybe .on?

Problem when deleting dynamically added row from html table using jquery

Anyway, my code is here:

   <script language='javascript' type='text/javascript'>

        $(document).ready(function () {

            function addRow() {
                var $myTable = $("#myTable").find('tbody');
                var parent = $(this).parent("td").parent("tr").attr("id");
                var newRowID = $myTable.children("tr").length + 1;

                var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
                $newRow.append($("<td align='center'>611000</td>"));
                $newRow.append($("<td class='style1'><input type='text' name='RegEmpType" + newRowID + "' size='15' data-emp-type='Regular' /></td>"));
                //see the data-emp-type not sure how else to know what is coming back unless name is going to be dynamically generated here using  a counter.  Should
                //only be one type of each field, so instead of EmpType being generic:  EmpTypeRegular1 and if they add another employee then EmpTypeRegular2 etc.

                $newRow.append($("<td><input type='checkbox' name='RegEmpIDC" + newRowID + "' value='true' /></td>"));
                $newRow.append($("<td align='center' id='RegEmpAgencyBudgt" + newRowID + "'>$43,0000</td>"));
                $newRow.append($("<td align='center' id='RegEmpRowBdgt" + newRowID + "'>$3,0000</td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowAdjBudget" + newRowID + "'><input type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowComments" + newRowID + "'><input type='text' name='RegEmpComments" + newRowID + "' /></td>"));
                $newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow))); //make it where any plus subsequently added will add a row
                $newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", removeRegularRow(newRowID))));
                $myTable.append($newRow);
            };


            //for some reason this is called everytime I click the PLUS also it does nothing?
            function removeRegularRow(index) {
                        $("#regFacEmpType" + index).remove();
            };



            $(".addRegular").on("click", addRow); //make it so the default row adds a new one.
        });
</script>
</head>
<body>
    <FORM action="" method="post">

    <table id='myTable'>

            <tbody>
                <tr id="FacultyEmployees">
                    <th align="center" class="style1">Index Number</th>
                    <th align="center" class="style1">Faculty Type</th>
                    <th align="center" class="style1">IDC</th>
                    <th align="center" class="style1">Agency Budgeted Amount</th>
                    <th align="center" class="style1">PI Budgeted Amount</th>
                    <th align="center" class="style1">PI Adjusted Budget</th>
                    <th align="center" class="style1">Comments</th>
                </tr>
                <tr id="regFacEmpType1" data-child-type='regExemptEmpType1' data-parent-type='regFacEmpType1'>
                    <!-- next row would be regExemptEmpType1 etc -->
                    <td align="center">611000</td>
                    <td align="center">Regular</td>
                    <td><input type="checkbox" name="IDC" value="true" /></td>
                    <td align="center" id="agencyBudgeted1">$43,0000</td>
                    <td align="center" id="piBudgetedAmount1">$33,0000</td>
                    <td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5" /></td>
                    <td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
                    <td><button type='button' class="addRegular">+</button></td>                    
                </tr>
            </tbody>

        </table>
        <button type="submit"/> Submit </button>
        </FORM>
+5
source share
6 answers

Solution to the problem

Regarding your JavaScript code:

  • bind();
  • removeRegularRow();

  • on('click'.. on('click'.. $(document).ready:

    $("#myTable").on('click', '.removeRegular', function(){

    $(this).parent().parent().remove();
    // It faster with: $(this).closest('tr').remove();

});

?

, , , DOM . , HTML-, .

$('.some_parent_element').on('click', '.element_desired', function(){...}); , . , , ? :

, , . , .

closest

, SO, "", . , , . , , , , , . , .

:

parent() , .

closest() , , DOM.

, parent() closest() "" Java Script. , ...

. , , , - , - , , , , . , .

, . " " .

$(document).ready(function () {

    		var index;
    
            function addRow() {
                var $myTable = $("#myTable").find('tbody');
                var parent = $(this).parent("td").parent("tr").attr("id");
                var newRowID = $myTable.children("tr").length + 1;
                
                index = newRowID;

                var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
                $newRow.append($("<td align='center'>611000</td>"));
                $newRow.append($("<td class='style1'><input type='text' name='RegEmpType" + newRowID + "' size='15' data-emp-type='Regular' /></td>"));
                //see the data-emp-type not sure how else to know what is coming back unless name is going to be dynamically generated here using  a counter.  Should
                //only be one type of each field, so instead of EmpType being generic:  EmpTypeRegular1 and if they add another employee then EmpTypeRegular2 etc.

                $newRow.append($("<td><input type='checkbox' name='RegEmpIDC" + newRowID + "' value='true' /></td>"));
                $newRow.append($("<td align='center' id='RegEmpAgencyBudgt" + newRowID + "'>$43,0000</td>"));
                $newRow.append($("<td align='center' id='RegEmpRowBdgt" + newRowID + "'>$3,0000</td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowAdjBudget" + newRowID + "'><input type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowComments" + newRowID + "'><input type='text' name='RegEmpComments" + newRowID + "' /></td>"));
                $newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow))); //make it where any plus subsequently added will add a row
                $newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>")));
                $myTable.append($newRow);
            };

    		$("#myTable").on('click', '.removeRegular', function(){
                
            	$(this).parent().parent().remove();
            
            });


            $(".addRegular").on("click", addRow); //make it so the default row adds a new one.
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<FORM action="" method="post">

    <table id='myTable'>

            <tbody>
                <tr id="FacultyEmployees">
                    <th align="center" class="style1">Index Number</th>
                    <th align="center" class="style1">Faculty Type</th>
                    <th align="center" class="style1">IDC</th>
                    <th align="center" class="style1">Agency Budgeted Amount</th>
                    <th align="center" class="style1">PI Budgeted Amount</th>
                    <th align="center" class="style1">PI Adjusted Budget</th>
                    <th align="center" class="style1">Comments</th>
                </tr>
                <tr id="regFacEmpType1" data-child-type='regExemptEmpType1' data-parent-type='regFacEmpType1'>
                    <!-- next row would be regExemptEmpType1 etc -->
                    <td align="center">611000</td>
                    <td align="center">Regular</td>
                    <td><input type="checkbox" name="IDC" value="true" /></td>
                    <td align="center" id="agencyBudgeted1">$43,0000</td>
                    <td align="center" id="piBudgetedAmount1">$33,0000</td>
                    <td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5" /></td>
                    <td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
                    <td><button type='button' class="addRegular">+</button></td>                    
                </tr>
            </tbody>

        </table>
        <button type="submit"/> Submit </button>
        </FORM>
Hide result
+3

, , .

, , .

. ...

$(document).on('click','.removeRegular', function(){
     $(this).closest('tr').remove();  
});

tr , ajax

<tr data-id="serverIdValue">

:

$(document).on('click','.removeRegular', function(){
     var $row = $(this).closest('tr'), rowId = $row.data('id');
     // only remove once server update confirmed
     $.post('/api/row/delete', {id: rowId}, function(response){
          // validate response first then remove the row
          $row.remove();
     });          
});

...

+3

click : -

$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", function(){ removeRegularRow(newRowID); })));

Fiddle

+2

:

.bind("click", removeRegularRow(newRowID))

removeRegularRow() function.

, :

.bind("click", function() { removeRegularRow(newRowID) })
+2

. -, .bind() . jQuery 1.7, .on() - . -, :

.bind("click", removeRegularRow(newRowID))

removeRegularRow . , . :

.on("click", function(){ removeRegularRow(newRowID); } ))

, , removeRegular:

$('#myTable').on('click', '.removeRegular', function() {
    $(this).parent().closest('tr').remove();
});

, , , , ( , ). .., , , . .

+2

$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", removeRegularRow(newRowID))));

.bind("click", removeRegularRow(newRowID)), , .

0

Source: https://habr.com/ru/post/1610307/

More articles:


All Articles