jQuery remove elements after creation

I'm building a jQuery sortable list where the user can add items from a table, drag and sort and/or remove them. I can add and sort no problem, but I can't work out how to remove an item element after it has been added. I'm开发者_C百科 relatively new to js / jQuery, so I have a feeling there's something new to learn here about how it works!

I'll leave out the ui.sortable stuff here as I'm only concerned with removing items..

<table>
   <tr>
    <td><a class="addrelease" href="#" cat_id="1">add</a></td>
    <td>Item 1</td>
   </tr>
    <tr>
    <td><a class="addrelease" href="#" cat_id="2">add</a></td>
    <td>Item 2</td>
   </tr>
</table>

<div id="list"></div>

<script>
$("a.addrelease").click(function (e) {
  e.preventDefault();
  cat_id     = $(this).attr('cat_id');
  remove_str = " <a href=\"#\" class=\"remove\">remove</a>";
  str        = cat_id + remove_str;
  $(str).appendTo("#list").hide().fadeIn();
});
$("a.remove").click(function (e) {
       alert("This function doesn't seem to be called");
       $(this).parent().remove(); //Doesn't happen..
});
</script>

I'm guessing that javascript doesn't recognize the new generated items - but I'm not sure, so I'm not sure where to start fixing it

Cheers

You should use live function to attach events to dynamically added elements.

Try this to bind click event to a.remove elements:

$("a.remove").live("click", function (e) {
       alert("This function doesn't seem to be called");
       $(this).parent().remove(); //Doesn't happen..
});

You're absolutely right, javascript won't recognise new items.

jQuery selectors will normally only match against elements currently in the document. When you use $("a.remove").function(), jQuery builds a list of nodes matching "a.remove", then calls function() on each of them.

The .live() function is special, and doesn't attach events directly to elements - instead, events bubbling up to the top of the DOM are evaluated to see if they match the selector.

IMHO, the best approach is to bind the remove handler when you create the new list entry:

  str        = cat_id + remove_str;
  var remove = $(str);
  remove.appendTo("#list").hide().fadeIn();
  remove.click(function(e) { .... })

Disclaimer: Typed late at night & not tested!

Here is my answer of how I think you should modify your code:
http://jsfiddle.net/RY5CP/

<table>
    <tr>
        <td><a class="addrelease" href="#" rel="1">add</a></td>
        <td>Item 1</td>
    </tr>
    <tr>
        <td><a class="addrelease" href="#" rel="2">add</a></td>
        <td>Item 2</td>
    </tr>
</table>

<div id="list"></div>

<script type="text/javascript">
    $("a.addrelease").click(function(e) {
        e.preventDefault();
        var catId = $(this).attr('rel');
        var itemName = $(this).closest('td').next('td').text();
        var newItem = '<p>' + catId + ' ' + itemName + ' <a href="#" class="remove">remove</a>';
        $(newItem).appendTo('#list').hide().fadeIn();
    });

    $("a.remove").live('click', function(e) {
        $(this).parent('p').remove();
    });
</script>

• It's not valid to use cat_1, cat_2 as HTML attributes. You can use the rel attribute if you need to have a specific value to be associated to your items
• Use the live() method to have the click event handler automatically attached to items dynamically created