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.
No comments:
Post a Comment