Добавление и удаление строк в таблице с помощью jquery

Question

У меня есть кнопка, #add, которая при нажатии добавляет строку в таблицу. Последняя ячейка недавно вставленной строки имеет значок удаления, который при нажатии меня хотел бы удалить строку.

Я считаю, что я на 95% от того, что происходит, но при нажатии на значок удаления ничего не происходит? Будет ли это связано с тем, что DOM нуждается в обновлении?

$(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'); 
    }) 
}); 

Answer 1

В коде есть некоторые ошибки.

1. Вы дублируете идентификатор. Вы не должны этого делать. Вам нужно использовать класс вместо него.
2. Поскольку вы динамически создаете строки, обычные события щелчка не будут работать. для этого вам нужно использовать делегирование событий.

Тогда ваш окончательный код будет выглядеть,

$('#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'); 
})