javascript - jQuery 附加删除按钮列表不断添加一个额外的按钮

Question

我有一个列表，我希望用户能够通过单击按钮添加另一个列表。添加列表后，应该会出现一个删除按钮。

每当我继续添加新元素时，都会附加一个额外的关闭按钮，从而导致类似这样的结果

.
..
...
....
.....
......

这是我的代码

 $('a').on('click', function(e){
   e.preventDefault();
   var a = $(this).closest('form').find('ol, li').last().html();
   console.log(a);
    var closeButton = "<a href='#' class='remove-upgrade-field'>Remove</a>" 
    $('<li>' + a + closeButton + '</li>' ).appendTo('ol');

 });

 $('.remove-upgrade-field').live('click', function(e){
   e.preventDefault();
   $(this).closest('li').remove();
 });

fiddle

Answer 1

更改为:

js

$('a').on('click', function(e){
    e.preventDefault();
    var a = $(this).closest('form').find('ol, li').last().children().html()
    console.log(a);
    var closeButton;
    closeButton = "<a href='#' class='remove-upgrade-field'>Remove</a>" 
    $('<li>' + a + closeButton + '</li>' ).appendTo('ol');

});

$('.remove-upgrade-field').live('click', function(e){
    e.preventDefault();
    $(this).closest('li').remove();
});

fiddle