CODEWITHSUNDEEP
jqueryjquery-ui-sortable
g33ky
g33ky

Reputation: 53

How to delete dynamically added item from sortable list?

I've created a jquery sortable list where each item has a "delete" button to the right. When you click the delete button, that item is deleted. I found this from another question on here ( Delete Jquery-ui sortable list item ). I need to allow the user to add items to the list, so I've created an Add button. The adding works fine, however, the newly added items cannot be deleted using the delete button. Here's the jfiddle: http://jsfiddle.net/g33ky/fadAn/1/

Code is below:

<script>
$("#fruitList").sortable();

$("#fruitList .delete").click(function () {
  $(this).parent().remove();
});

$("#addFruit").click(function () {
  $('#fruitList').append("<li class='fruit'>New fruit<button class='delete'>Delete</button></li>");
});
</script>

<html>
<button id='addFruit'>Add fruit</button>
<ul id="fruitList">
    <li class="fruit">Apple
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Banana
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Orange
        <button class="delete">Delete</button>
    </li>
</ul>
</html>

Click on "Add Fruit", then try deleting the new fruit, and you'll see that the delete on "New Fruit" doesn't work. I've googled and searched on here, but so far no luck. Any help would be greatly appreciated.

Upvotes: 2

Views: 7470

Answers (4)

Adrien Gorrell
Adrien Gorrell

Reputation: 1319

This is a very simple situation where you have new dynamically created elements in your DOM... and you want them to have the same behaviour as your previous elements with the same class...

Simply change your calls ".click(function(){})" to ".live('click', function() {})".

As of jQuery >= v1.7, you can (& should) use .on(). http://api.jquery.com/on/

It's called delegation, see http://www.sitepoint.com/event-delegation-with-jquery/

Upvotes: 1

Rocky Balboa
Rocky Balboa

Reputation: 1486

This is bacause you're using jQuery "click" method to run the handler. Unfortunately, this method only binds to existing DOM elements so if you add any new

  • , or any other tag, it won't be boud to that "click" handler. To fix that you need to use jQuery's "on" function that binds to anytinhg that exists or will be created in future.

    The documentation is here: http://api.jquery.com/on/

    Probably your JS should look sometinh like this (sorry if there are any errors but I don't have anywhere to test it at this moment)

    $( "#fruitList" ).on( "click", ".delete", function() {
    $(this).parent().remove();
});

$( "#fruitList" ).on( "click", "#addFruit", function() {
    $('#fruitList').append("<li class='fruit'>New fruit<button class='delete'>Delete</button></li>");
});

    Upvotes: 0

    • Andreas Klein
    Andreas Klein

    Reputation: 106

    the eventhandlers for the dynamically added element are not defined.

    use this code instead

    $("#fruitList").on('click', '.delete', function () {
    $(this).parent().remove(); 
});

    it will add the clickhandler dynamically

    Upvotes: 5

    Fouad Fodail
    Fouad Fodail

    Reputation: 2643

    Use :

    $("body").on('click', '#fruitList .delete', function () {
    $(this).closest( ".fruit" ).remove();
});

    JSFiddle : http://jsfiddle.net/NhhKd/

    Upvotes: 2

    Related Questions