How to remove elements in HTML from Javascript?

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

Why are you wrapping $(this).parent() in brackets? Try $(this).parent().remove() instead. Also, can you be more specific than 'isn't working'? What's happening that isn't what you expect? If nothing appears to be happening, are you getting any Javascript errors? — Anthony Grist
– Anthony Grist, Commented Jan 13, 2012 at 16:03
@AnthonyGrist I agree that that's a strange way to write it, but it shouldn't make any difference. — Pointy
– Pointy, Commented Jan 13, 2012 at 16:04

Rory McCrossan · Accepted Answer · 2012-01-13 16:09:16Z

2

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

edited Jan 13, 2012 at 16:09

answered Jan 13, 2012 at 16:04

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rich O'Kelly Over a year ago

The relevant td will not be part of the DOM either since they get appended too.

Rory McCrossan Over a year ago

Glad to help. By the way, you should accept some answers to your previous questions, here's how to do it: meta.stackexchange.com/questions/5234/…

JaredPar · Accepted Answer · 2012-01-13 16:12:38Z

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

edited Jan 13, 2012 at 16:12

answered Jan 13, 2012 at 16:04

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

4 Comments

user1106925 Over a year ago

Your .on() solution is equivalent to the $(".delete_filter").click( code. To make .on() do event delegation, you need to place the handler on an ancestor, and give a selector, like: $("#keywords").on('click','.delete_filter',func...

Anthony Grist Over a year ago

If you're using a version prior to 1.7 you should use delegate rather than live. "As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()." .live() - jQuery API

JaredPar Over a year ago

@amnotiam interesting, didn't realize that.

user1106925 Over a year ago

Yeah, on is basically bind and delegate rolled into one, the two being distinguished by the presence of the selector argument. +1 on the update.

Rich O'Kelly · Accepted Answer · 2012-01-13 16:04:08Z

1

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

answered Jan 13, 2012 at 16:04

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

Comments

Wesley · Accepted Answer · 2012-01-13 16:08:51Z

1

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..

answered Jan 13, 2012 at 16:08

Wesley

2,27415 silver badges14 bronze badges

Comments

Downpour046 · Accepted Answer · 2012-01-13 16:04:44Z

0

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

    });
});

answered Jan 13, 2012 at 16:04

Downpour046

1,6719 silver badges14 bronze badges

Comments

techfoobar · Accepted Answer · 2012-01-13 16:04:46Z

0

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

answered Jan 13, 2012 at 16:04

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Collectives™ on Stack Overflow

How to remove elements in HTML from Javascript?

6 Answers 6

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related