Removing a dynamically created li from ul

Question

I\'m using jquery to add and remove bullets on the fly after the DOM is loaded.

Here\'s the code to add a bullet which works fine:

// add bullet
$(\'         


        

Answer 1

Replace the following:

$('#linkedEventList ul').append('<li id=' + datum._id + '>' + datum.headline + ' <a href=javascript:; title=delete onclick=remove(this) class=itemDelete>(x)</a> <a href=/events/' + datum._id + '>(open)</a></li>');

with this:

$('#linkedEventList ul').append('<li id=' + datum._id + '>' + datum.headline + ' <a href=javascript:; title=delete class=itemDelete>(x)</a> <a href=/events/' + datum._id + '>(open)</a></li>');

$('#'+datum._id).bind({
   click: function(o) {
      $(this).remove();
   }
});

Hope this helps.

Answer 2

Don't you mean

$(this).parent().remove();

Also, you might want to consider

$(this).closest('li').remove();

That will go up the DOMtree until it finds a li, if you ever wrap your anchor in another element, the last example wont brake :)

Answer 3

You could do it using the index of the clicked <li>

$('li').on('click', function() {
    $(this).parent().children('li:eq(' + $(this).index() + ')').remove();
});

Edit: this works as well:

$('li').on('click', function() {
    $(this).remove();
});

See fiddle.

Answer 4

I used a combination of the answers provided.

I removed the onclick in the li, and instead referenced the class being clicked and combined that with 'this' as per below.

$('#linkedEventList').on('click', '.itemDelete', function(){
$(this).parent().remove();
});

Here's the jsfiddle that works in both FireFox and Chrome: http://jsfiddle.net/jjgelinas77/CsAJn/27/