Remove Div On The Click Of A Link That Was Created Dynamically

I have the following code, when a checkbox is clicked it creates a div with some info. However in that div I added an anchor tag to remove the div itself. However, I am not sure h

Solution 1:

$(document).on('click','.selectedjobs a',function(){
       $(this).parent().remove();
});

Solution 2:

give your div a class and use on delegate event

try this

$("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="#" class="removeJob">Remove selected job</a></div>');

$('[id$=ResultsDiv]').on('click','.removeJob',function(){
    $(this).parent().remove();
})

OR

without using class

$('[id$=ResultsDiv]').on('click','.selectedjobs a',function(){
    $(this).parent().remove();
})

note: delgating it to the closest static parent container is better than the document itself

link to read more about on events

Solution 3:

USE THIS CODE :-

//Add selected job in the results div

functionAddSelectedJob(id, display) {
    //create a div for every selected job
    $("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="javascript:;" onclick="removeSelectedJob(this)">Remove selected job</a></div>');
}

functionremoveSelectedJob(el){
    $(el).parent().remove();
}

Solution 4:

something like:

$("#ResultsDiv>div.selectedjobs a").click(function(){
    $(this).parent().remove();
});

Solution 5:

Try live click...

$(".selectedjobs a").live("click", function(){
    $(this).parent().remove();
});