jQuery-删除div元素

Question

I'm doing a project, where I got stuck with some user interfacing tweaks, where I need to remove some HTML div elements.

Please check this code http://jsfiddle.net/YVZH5/ If you click the text you will see the blue tag. I need to remove that tag when the user clicks the X. But it is not working.

And It is working here http://jsfiddle.net/Jst4v/ So, where is the problem occurs?

Thanks!

Answer 1

you need to chage

$("#service-sets").click(function(){
    $("#facebook-tag").remove();
});

to

$("#service-sets").on('click', '#facebook-del', function(){
    $("#facebook-tag").remove();
});

Because, #facebook-del (cross icon) will remove the tags and they come to DOM after DOM ready, so they need delegate ie live events.

DEMO

Answer 2

The reason it works in your first fiddle and not in your second is because the element you're trying to attach a click function to (facebook-del) does not exist in the DOM at the time of assignment.

In the second example, the element exists on page load and thus gets assigned the click function.

Try looking at .on() as a way to assign your click events to dynamically added elements like this.