javascript - 如何从 Javascript 中删除 HTML 中的元素？

Question

我有一个 javascript 函数，可以将元素附加到我的 HTML 页面中。我想添加一个功能，当用户单击 HTML 中的按钮时，它将从页面中删除关联的 HTML 内容。

$("#keywords").append("<td><img src=\"images/delete.png\" class=\"delete_filter\" /> " + id + "</td>");

上面的代码是我向 HTML 添加元素的方式。因此，在这种情况下，当用户单击附加图像 <td><img src=\"images/delete.png\" class=\"delete_filter\" /> 时 将从 HTML 中删除。

这是我现在所拥有的，但不起作用:

$(".delete_filter").click(
function(){
    ($(this).parent()).remove();
});

Answer 1

因为元素是动态添加的，所以 click() 将不起作用，因为它只能看到加载时可用的元素。

试试这个:

$("#myTable").delegate(".delete_filter", "click", function() {
    $(this).parent().remove();
})

或者在 jQuery 1.7+ 中

$("#myTable").on("click", ".delete_filter", function() {
    $(this).parent().remove();
})