Remove div on the click of a link that was created dynamically

Question

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 how to remove the div on the link click because the div is dynamically generated.

//Add selected job in the results div
function AddSelectedJob(id, display) {
    //create a div for every selected job
    $("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="#">Remove selected job</a></div>');
}

Off topic but interesting read concerning href=#. http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 — René, Jun 03 '13 at 07:35

score 4 · Answer 1 · answered Jun 03 '13 at 07:13

4

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

answered Jun 03 '13 at 07:13

Anton

32,245
5
44
54

1

delgating it to the closest static parent is better `[id$=ResultsDiv]` in this case – bipen Jun 03 '13 at 07:18

bipen · Answer 2 · 2013-06-03T07:20:08.313

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

score 2 · Accepted Answer · answered Jun 03 '13 at 07:14

2

USE THIS CODE :-

//Add selected job in the results div

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

function removeSelectedJob(el){
    $(el).parent().remove();
}

answered Jun 03 '13 at 07:14

Chetan Bhopal

436
4
12

1

I understand you're tempted to use this quick fix, using the onclick attribute is inflexible and imo unwanted because I would like my JS seperate from my HTML. And using this you can only add 1 event handler. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Why_use_addEventListener.3F – René Jun 03 '13 at 07:26

score 0 · Answer 4 · answered Jun 03 '13 at 07:13

0

something like:

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

answered Jun 03 '13 at 07:13

JP Hellemons

5,977
11
63
128

Good point! well I will let this answer here to point out that you should not use my answer ;) Thanks Johan! – JP Hellemons Jun 03 '13 at 07:15

score 0 · Answer 5 · answered Jun 03 '13 at 07:17

0

Try live click...

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

answered Jun 03 '13 at 07:17

yeyene

7,297
1
21
29

score 0 · Answer 6 · answered Jun 03 '13 at 07:21

In this case divs are not usually created but are rather hidden instead by which you would a lot of hassle. You can create a div that has "display:none;" in CSS and then when the tickbox is checked you can use

$("[id$=ResultsDiv]").show();

and when it is unchecked,

$("[id$=ResultsDiv]").hide();

score 0 · Answer 7 · answered Jun 03 '13 at 07:31

I prefer using .parents() in this case.

And if possible, add a class to your anchor, then return false or use .preventDefault() to prevent anchor's default action.

//Add selected job in the results div
function AddSelectedJob(id, display) {
    //create a div for every selected job
    $("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a class="removeSelectedJobs" href="#">Remove selected job</a></div>');
}

$('.selectedjobs .removeSelectedJobs').live('click', function() {
    $(this).parents('.selectedjobs').remove();
    return false;
});

live() was removed from jQuery few versions ago. Instead of use on(), also works like .live() :) — stefanz, Jun 03 '13 at 07:34

Remove div on the click of a link that was created dynamically

7 Answers7

Linked