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
– blurfus, Commented Mar 17, 2014 at 23:58
@Musa could you please elaborate? If I remove promise logic how to trigger $("#deleteFilter" + filtersRow).click? — Anonymous
– Anonymous, Commented Mar 18, 2014 at 0:13
Use $("#customFiltersTable tbody").append .... The way you add rows now, it appends them after the <tbody> tag. — blgt
– blgt, Commented Mar 18, 2014 at 0:14
@blgt the rows are added before the <tbody> I can clearly see it. I tried yours and I still have the same problem! — Anonymous
– Anonymous, Commented Mar 18, 2014 at 0:18

76484 · Accepted Answer · 2014-03-18 00:42:54Z

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, 2014 at 0:42

76484

9,0013 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anonymous Over a year ago

Simple and perfect. Thank you so much.

Paul · Accepted Answer · 2014-03-18 00:49:51Z

0

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.

answered Mar 18, 2014 at 0:49

Paul

1,50211 silver badges19 bronze badges

Comments

congnghia0609 · Accepted Answer · 2015-04-09 08:17:46Z

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 9, 2015 at 8:17

answered Apr 2, 2015 at 4:51

congnghia0609

12 bronze badges

Collectives™ on Stack Overflow

Javascript/JQuery to add and delete table row by Id

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related