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