Question

这是我的代码。

HTML

<h2>Todo List</h2>
<div id='additem'>
    <input type='text' name='additem'/>
    <button>Add Item</button>
</div>
<div id='todolist'>
    <ol>
    </ol>
   <!-- Add item from "additem" input field -->
</div>

JS

$(document).ready(function(){
    $('button').click(function(){
        var item = $('input[name=additem]').val();
        $('ol').append('<li>'+ item +' <button id="remove">Remove</button></li>');
    });
    $("#remove").click(function(){
       $(this).parent('li').remove();
    });

   });

Answer 1

您需要使用on()使用事件委派动态添加元素。您可以将事件委托给使用on绑定事件时可用的 parent 元素，否则您可以使用document。

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

委派活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序的需要。这个 element可以是a中视图的容器元素模型 - 视图 - 控制器设计，Reference

Answer 2

在动态创建删除按钮时 - 您需要像这样委派点击事件

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

http://jsfiddle.net/mohammadAdil/rfK5a/6/

http://api.jquery.com/on/

Answer 3

您可以在容器上添加直播事件：

$('#todolist').on('click', 'button', function(){
  $(this).closest('li').remove();
});

请参阅更新的小提琴：http://jsfiddle.net/tkirda/rfK5a/4/

Answer 4

那么这是http://jsfiddle.net/rfK5a/7/

您需要以下代码

$(document).ready(function(){
    $('button').click(function(){
        var item = $('input[name=additem]').val();
        $('ol').append('<li>'+ item +' <button class="remove">Remove</button></li>');
    });
    $("#todolist").on("click",".remove",function(){
       $(this).parent('li').remove();
    });

   });

我建议您使用remove class而不是删除ID，因为您将拥有多个删除按钮。理想情况下，我们不应该有一个具有一个id的元素。

Answer 5

由于自jQuery 1.9以来已经删除了live（）并且你在jsfiddle中使用了jQuery 2.0，所以简单的答案是使用on()，正如其他人所指出的那样。 http://jquery.com/upgrade-guide/1.9/#live-removed

我还会在“删除”按钮上将id更改为类，因为可能有很多这样的。同时将parent（）更改为nearest（），这样如果您的标记略有变化，您的代码仍然有效。

http://jsfiddle.net/rfK5a/10/

$(document).ready(function(){
  $('button').click(function(){
    var item = $('input[name=additem]').val();
    $('ol').append('<li>'+ item +' <button class="remove-btn">Remove</button></li>');
  });
  $('#todolist').on('click', '.remove-btn', function(e) {
    $(this).closest('li').remove();
  });
});

如何在jQuery中使用.click和.remove删除元素

5 个答案:

委派活动