CODEWITHSUNDEEP
jqueryhtml-lists
user2001702
user2001702

Reputation:

Removing a dynamically created li from ul

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
$('#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>');

Now here's the code to remove the clicked bullet, which works fine in Firefox, but does not work right in Chrome. In Chrome, the hyperlink is removed and not the parent or li.

// remove bullet
//$(link).closest('li').remove();
$(link).parent().remove();

Either method above works fine in FireFox, but neither works in Chrome. Any ideas on the solution?

jsfiddle: http://jsfiddle.net/jjgelinas77/CsAJn/14/

Upvotes: 2

Views: 16949

Answers (4)

Martijn
Martijn

Reputation: 16103

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 :)

Upvotes: 2

user2001702
user2001702

Reputation:

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/

Upvotes: 4

Terence
Terence

Reputation: 1374

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.

Upvotes: 3

web-nomad
web-nomad

Reputation: 6003

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.

Upvotes: 1

Related Questions