Adding and Deleting rows in table using jquery

Question

I have a button, #add, which when clicked adds a row into a table. The last cell of the newly inserted row has a delete icon which if clicked I would like to remove the row.

I believe I'm 95% of the way there but for when clicking the delete icon nothing happens? Would this be due to the DOM needing a refresh?

$(document).ready(function(){
    $('#add').click(function() {
        $('tbody').append("<tr><td>test</td><td></td><td data-editable='true'>1</td><td><center><i id='delete' class='fa fa-trash-o'></i></center></td></tr>");
        $('#table').editableTableWidget();
    });
    $('#delete').click(function(){
        $(this).closest('tr').remove();
        console.log('click');
    })
});

Firstly you need to make the appended `#delete` element use a class, as id attributes cannot be repeated within a document. Secondly, you need to use a delegated event handler. See the question I linked to for more details. — Rory McCrossan, Nov 19 '15 at 14:46

score 2 · Accepted Answer · edited Nov 19 '15 at 14:50

There are some mistakes in your code.

You are duplicating the id. You shouldnt do that. You need to use class instead of it.
Since you are creating the rows dynamically, normal click events wont work. you need to use event delegation for that.

Then your final code will be look like,

$('#add').click(function () {
    $('tbody').append("<tr><td>test</td><td></td><td data-editable='true'>1</td><td><center><i  class='fa fa-trash-o delete'></i></center></td></tr>");
    $('#table').editableTableWidget();
});
$('#table').on('click', '.delete', function () {
    $(this).closest('tr').remove();
    console.log('click');
})

Adding and Deleting rows in table using jquery

1 Answers1