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

Answer 2

问题似乎是在将DOM元素添加到页面之前添加click处理程序。因此它不与该元素绑定。请尝试使用on代替

$('table').on('click', '.delete-filter', function() {
  $(this).parent().remove();
});

on API是jQuery 1.7的新功能。如果您使用的是早期版本，请尝试live

$('table').delegate('.delete-filter', 'click', function() {
  $(this).parent().remove();
});

Answer 3

在设置事件监听器时，元素不会成为html的一部分，请尝试以下操作：

$('table').delegate('.delete_filter', 'click', function() {
  $(this).parent().remove();
});

Answer 4

尝试：

$('#keywords').on('click', '.delete_filter', function() {
    $(this).parent().remove();

});

可能你的代码不起作用，因为执行代码时还没有delete_filter类对象。 on语法将它绑定为动态，因此它应该可以工作..

Answer 5

试试这个

$(document).ready(function(){

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

    $(".delete_filter").on("click", function(event) {

     // Not sure why you had this section wrapped in a function() tag, wasn't necessary
     $(this).parent().remove();

    });
});

Answer 6

尝试此操作：在将项目附加到DOM后绑定事件。

$("#keywords").append("<td><img src=\"images/delete.png\" class=\"delete_filter\" /> " + id + "</td>"); $(".delete_filter").click(function() { $(this).parent().remove(); });

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

6 个答案: