Javascript/JQuery to add and delete table row by Id

Question

I am trying to add and delete rows (by Id) to my table dynamically. The add button works fine but I am not sure why the delete button doesn't work (it's either deletes the last row or doesn't work). Any suggestion please?

Here is my table:

<table class="customFiltersTable" id="customFiltersTable">
    <tbody>
    </tbody>
</table>

The Javascript add button has this code inside:

filtersRow = filtersRow + 1;

var fType1 = $('<tr class="rowTableFilters" id="rowFilters'+filtersRow+'" name="rowFilters'+filtersRow+'"><td class="colFilters" id="colFilters'+column1+'" name="colFilters'+column1+'" width="480px" align="center"></td><td class="colFilters" id="colFilters'+column2+'" name="colFilters'+column2+'" width="480px" align="center"></td><td class="delButton" id="delButton" name="delButton" width="40px" align="center"><button type="button" class="btn btn-link" id="deleteFilter'+filtersRow+'" name="deleteFilter'+filtersRow+'" style="float: right;">Del</button></td></tr>');

$("#customFiltersTable").append(fType1).promise().done(function () {
   $("#deleteFilter" + filtersRow).click(function(){
         var row = document.getElementById("rowFilters"+filtersRow);
         row.parentNode.removeChild(row);
   });
});

Thanks!

try `$("#deleteFilter" + filtersRow).on('click', function(){...}` — blurfus, Mar 17 '14 at 23:58
@Musa could you please elaborate? If I remove promise logic how to trigger $("#deleteFilter" + filtersRow).click? — Anonymous, Mar 18 '14 at 00:13
Use `$("#customFiltersTable tbody").append ...`. The way you add rows now, it appends them after the `` tag. — blgt, Mar 18 '14 at 00:14
@blgt the rows are added before the I can clearly see it. I tried yours and I still have the same problem! — Anonymous, Mar 18 '14 at 00:18
@Anonymous ...which is why I add this as a comment and not an answer. It's simply better practice. Refer to this question for more info: http://stackoverflow.com/questions/171027/add-table-row-in-jquery — blgt, Mar 18 '14 at 00:20

score 1 · Accepted Answer · answered Mar 18 '14 at 00:42

1

Acquaint yourself with jQuery's event delegation, https://learn.jquery.com/events/event-delegation/. You'll learn that you can avoid attaching the delete click listener to every row you add, and instead attach that listener once to the table element:

$('#customFiltersTable').on('click', 'button', function () {
    $(this).closest('tr').remove(); 
});

answered Mar 18 '14 at 00:42

76484

8,498
3
19
30

Simple and perfect. Thank you so much. – Anonymous Mar 18 '14 at 01:00

score 0 · Answer 2 · answered Mar 18 '14 at 00:49

You're incrementing filtersRow; however your click function only gets evaluated at the time you press the button. In other words, this code:

function(){
     var row = document.getElementById("rowFilters"+filtersRow);
     row.parentNode.removeChild(row);
}

is executed on click and will run with whatever value of filtersRow you last incremented. You'll always be removing the last row.

Perhaps something like:

function () {
    $(this).closest('tr').remove();
}

Sorry, this is compiled in my head.

congnghia0609 · Answer 3 · 2015-04-09T08:17:46.160

0

To add row:

var tmp = '<tr id="4_r"><td>row4</td></tr>';
$('#myTable tbody').append(tmp);

To delete row have id="4_r":

var iddel = "4_r";

$('#myTable').closest('table').find('tbody > tr')
                .each(function(){
                    var idr = this.id;
                    if(idr == iddel){
                        $(this).remove();
                    }
                });

edited Apr 09 '15 at 08:17

answered Apr 02 '15 at 04:51

congnghia0609

1
2

Javascript/JQuery to add and delete table row by Id

3 Answers3