Question

我制作一个简单的待办事项列表。它主要是工作和完成。单击列表元素时，对象将被删除，您可以通过底部的文本输入创建新的列表元素。唯一的问题是，当您因某些原因点击它们时，无法删除新的列表元素。

以下是代码：

$(document).ready(function(){

    $("li").click(function(){
        $(this).remove();
    });

    $("button").click(function(){
        var entry = $("#entry").val();
        $("<li></li>", {
            text: entry
        }).appendTo("#list ul");   
        $("#entry").val("");
    });

});

Answer 1

由于新的li元素是动态创建的，因此您需要使用事件委派来为这些元素注册事件处理程序

试试这个

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

DEMO

Answer 2

试试这个：

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

<强> DEMO

Answer 3

这很好用：

$(document).ready(function(){

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

  $("button").click(function(){
     var entry = $("#entry").val();
     $("<li></li>", {
        text: entry
     }).appendTo("#list ul");   
     $("#entry").val("");
  });

});

小提琴链接： - http://jsfiddle.net/7psqndwL/29/

OR

 $(document).ready(function(){

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

  $("button").click(function(){
     var entry = $("#entry").val();
     $("<li></li>", {
        text: entry
     }).appendTo("#list ul");   
     $("#entry").val("");
  });

});

Remove（）不处理新元素

3 个答案: