JQuery not removing added element

Question

What I want to do is add and remove list items. I have got it to add new items to the list and I can remove existing ones but not the ones that have been added. It seem like it would work but it doesn't. Any help would be appreciated! Here the code:

JQuery:

<script  type="text/javascript">
$(function(){
    $('a#add').click(function(){
        $('<li><a href="#" id="remove">--</a>List item</li>').appendTo('ul#list');
    });

    $('a#remove').click(function(){ 
        $(this).parent().remove();
    });
});
</script>

HTML:

<a href="#" id="add">Add List Item</a>
<ul id="list">
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
</ul>

Answer 1

try this

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

or

  $('a#remove').live('click',function(){ 
            $(this).remove();
        });

Answer 2

The id attribute is supposed to be unique, your HTML is invalid, thus jQuery doesn't work (I'm betting the a#remove selector only selects the first item). Use something else, like name, which isn't supposed to be unique. Also, you might want to use .parent("li"). Here's how I'd do this:

jQuery:

<script  type="text/javascript">
function setEvents() {
    $("a#add").click(function() {
        $("#list").append(
            $("<li>").append(
                $('<a href="#" name="remove">--</a>').click(removeItem)
            ).append("List item")
        );
    });

    $('a[name=remove]').click(removeItem);
}
function removeItem(e) {
    $(this).parent("li").remove();
}
$(document).ready(setEvents);
</script>

HTML:

<a href="#" id="add">Add List Item</a>
<ul id="list">
<li><a href="#" name="remove">--</a> List item</li>
<li><a href="#" name="remove">--</a> List item</li>
<li><a href="#" name="remove">--</a> List item</li>
<li><a href="#" name="remove">--</a> List item</li>
</ul>

Answer 3

Here you go:

jQuery(function($) {
    $('#add').click(function(e) {
        $('<li><a href="#" class="remove">--</a>List item</li>').appendTo('#list');
        e.preventDefault();
    });

    $('.remove').live('click', function(e) { 
        $(this).parent().remove();
        e.preventDefault();
    });
});

Answer 4

The issue with the code is not so much the lack of unique id values - although a class of 'remove' should be used instead - the main problem is the fact that the newly added items do not have a click handler associated with them. The code that adds click handlers is executed before any of the new items are created.

The use of the live() method should be investigated - I can't offer much more advice on this front, as I've not had the need to use this myself yet.

Answer 5

Hello,

Ignoring the fact your elements should have unique ID attributes, there's one thing to always keep in mind: when you bind a function to an event -- for example $(selector).bind('click', function) or $(selector).click(function) -- only the elements in the DOM that match the selector at that specific moment in time will behave as you expect. If you add more elements that match the selector at a later time, these won't magically get associated with the desired behavior.

This is one of the reasons the live() jQuery function exists, and I encourage you to take a look. An alternative approach is to manually bind your desired function to the elements you add to the DOM (like Felix showed you).