jQuery Cant remove li once added

Question

When I add in a new <li> into the list, and then I try to remove it, it won't let me remove newly added features from the list?

http://jsfiddle.net/43nWM/

Cheers

Answer 1

You can try.

http://jsfiddle.net/43nWM/1/

    $(function(){
      $('#cblist a').live('click', function(){
        $(this).parent('li').remove();
        return false;
      });
    });

Answer 2

The secret here is event delegation. When you call .click(function() {...}) or .on('click', function() {...}) that event handler is only assigned to elements that matched the selector when the code was run. It won't affect elements that are added later.

However, you can use event delegation to assign an event handler to a static element that will contain all of your dynamic elements, which will run the callback function whenever an element matching the dynamic selector triggers that type of event:

$('#cblist').on('click', 'a', function() {
    $(this).parent('li').remove();
    return false;
});

Take a look at the section titled Direct and delegated events in the documentation for the .on() function for more information.

Answer 3

$(function(){
     $('#cblist').on('click','a',function(){
         $(this).parent('li').remove();
         return false;
     });
});

View this jsfiddle

Answer 4

you should add this code to for addition on dynamic li tags

$li = $('<li>'+name+'</li>');
$a = $('<a href="">remove</a>');
        $a.click(function(){
          $(this).parent('li').remove();
          return false;      
        });
$li.append($a);

i have also updated the code on jsfiddle

Answer 5

Another option is to use the on() function, as shown here: http://jsfiddle.net/43nWM/12/

To be honest, I actually prefer the other two solutions here though.

EDIT: Use on() instead. I originally proposed using live()

Answer 6

You are binding the click event only to current 'remove' links, not future ones. Use event delegation for this, to cover both bases. Change:

  $('#cblist a').click(function(){

to

  $('#cblist').on('click', 'a', function() {