通过按钮插入后无法删除行 - HTML/JS

Question

我有一个 table 是我在文件上传后填写的。当我上传文件时，我可以删除选定的行。

但是当我通过点击添加一行时，我无法再删除这一行。

使用以下内容创建行：

function addTableRow(table, value)
{
 var table = document.getElementById("tablebody");
 var row = table.insertRow();
 var cell1 = row.insertCell(0);
 var cell2 = row.insertCell(1);

 cell1.innerHTML = value;
 cell2.innerHTML = '<img class="table-remove" style="height:15px;" src="images/delete.png">';
}

点击图片添加行

 $('.table-add').click(function () {
    tableAddRow(document.getElementById("tablebody", "TEST"));
  });

删除行

$('.table-remove').click(function () {
    $(this).parents('tr').remove();
  });

我无法删除通过单击按钮添加的行。似乎找不到手动添加的行的 $('.table-remove')。

此时我卡住了。感谢您的任何建议！

Answer 1

发生这种情况是因为事件绑定发生在文档加载时。在初始 document.ready 之后插入 DOM 的任何元素都不会被已经运行的代码识别。如果在页面加载后动态 insert/remove 元素，则需要在插入新元素时将事件绑定到新元素。

Answer 2

正如 Lalalena 的回答所建议的，您需要将函数与 document 绑定，以便它在 DOM 中注册，如下所示：

$(document).on('click', '.table-remove', function () {
    $(this).parents('tr').remove();
});

通过按钮插入后无法删除行 - HTML/JS

Cannot delete a row after I inserted it via button - HTML/JS

html

javascript

jquery

html-table