Question

In my code I have the following:

$(document).ready(function(){           
    $("input#Addmore").click(function(){
        $('div#add_div').append("<a class='remove' href='#'>X</a>");
    });         
});

This code on click of add more button and I want to remove parent div of above added code on click of “X” by jquery. for that purpose i am using this code

$("a.remove").click(function(){ 
    $(this).closest("div").remove();
});

But the code is not working because jQuery did not getting append anchor code. Can any one tell me the solution?

Answer 1

You need to delegate the event to the nearest static element. Try this:

$('#add_div').on('click', 'a.remove', function() {
    $(this).closest("div").remove();
});

Or if you are using an older version of jQuery (less than 1.7) use delegate() like this:

$('#add_div').delegate('a.remove', 'click', function() {
    $(this).closest("div").remove();
});