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

Question

I have a javascript function that appends elements into my HTML page. I want to add a function that when a user clicks a button in HTML it will remove the associated HTML content from the page.

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

The code above is how I am adding elements to the HTML. So in this case when a user clicks the appended image <td><img src=\\"images/delete.png\\" class=\\"delete_filter\\" /> will be removed from the HTML.

This is what I have now that isn't working:

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

Answer 1

Because the element is being dynamically added click() will not work as it only sees elements which were available on load.

Try this instead:

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

Or in jQuery 1.7+

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

Answer 2

The problem appears to be that you're adding the click handler before the DOM element is added to the page. Hence it's not binding to that element. Try using on instead

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

The on API is new to jQuery 1.7. If you're using an earlier version then try live

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

Answer 3

The elements won't be part of the html at the point you set up your event listeners, try the following:

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

Answer 4

Try:

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

});

Probably your code doesn't work because the delete_filter class objects aren't there yet when the code is executed. The on syntax binds it dynamic so it should work..

Answer 5

Try this

$(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

Try this: Bind the event after appending the item to DOM.

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