Javascript 使用jquery添加和删除表中的行

我有一个按钮，

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

$（文档）.ready（函数（）{
$（'#添加'）。单击（函数（）{
$（'tbody'）。追加（“test1”）；
$（“#表”）.editableTableWidget（）；
});
$（“#删除”）。单击（函数（）{
$（this）.closest（'tr'）.remove（）；
console.log（'click'）；
})
});

您的代码中有一些错误

你在复制身份证。你不应该那样做。您需要使用类而不是它

因为您是动态创建行的，所以正常的单击事件不起作用。为此，您需要使用事件委派

那么您的最终代码将如下所示：

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

$（'#添加'）。单击（函数（）{
$（'tbody'）。追加（“test1”）；
$（“#表”）.editableTableWidget（）；
});
$（“#表”）。在（'单击'，'删除'，函数（）{
$（this）.closest（'tr'）.remove（）；
console.log（'click'）；
})

请发布一些HTML。可能会创建一个更清晰的问题。首先，您需要使附加的

#delete

元素使用类，因为id属性不能在文档中重复。其次，您需要使用委托事件处理程序。有关更多详细信息，请参阅我链接到的问题。