如何制作可以使用jquery添加或删除的项目列表？

我正在尝试创建一个动态项目列表，可以添加到动画中以及从动画中删除。 我遇到的问题是新项目无法删除。 关于我做错什么的任何想法？

http://jsfiddle.net/waspinator/nZ9y2/1/

HTML

 add item  
  
 First Item x 
 
 Second Item x 
  

CSS：

 #list{ width: 140px; } .remove-item{ font-family: sans-serif; float: right; margin-top: -6px; cursor: pointer; } .item{ color: white; background: CornflowerBlue; margin-bottom: 4px; padding: 4px; border-radius: 4px; } .add-item-button{ margin-bottom: 10px; width: 140px; } 

JS

 var item_number = 1; $('.remove-item').click(function(){ $(this).parent().animate({opacity: 0}, function () { $(this).slideUp(); }); }); $('.add-item-button').click(function() { var new_item = '
' + 'New Item ' + item_number + 'x' + '
' $(new_item).prependTo('#list').hide().slideDown(); item_number = item_number + 1; }); 

Answer 1

绑定到#list因为它总是在dom中，然后选择.remove-item类。 这是小提琴： http ： //jsfiddle.net/nZ9y2/3/

 var item_number = 1; var remove = function() { $(this).parent().animate({opacity: 0}, function () { $(this).slideUp(); }); } $('#list').on('click', '.remove-item', remove); $('.add-item-button').click(function() { var new_item = '
' + 'New Item ' + item_number + 'x' + '
' $(new_item).prependTo('#list').hide().slideDown(); item_number = item_number + 1; }); 

Answer 2

更改用于删除的js函数

 $('#list').on('click', '.remove-item', function(){ $(this).parent().animate({opacity: 0}, function () { $(this).slideUp(); }); }); 

http://jsfiddle.net/waspinator/nZ9y2/4/