Question

我正在尝试创建一个列表，在其中添加元素，并且只在按下“删除”按钮时逐个删除。不幸的是，发生了一些奇怪的事情，如果我添加2个元素，则删除按钮会删除它们。

$(document).ready(function(){
  $(".additem").on("click", function(){
    var val = $("input").val();
    if(val!=="") {
      var elem = $("<li></li>").text(val);
      $(".list-item").append(elem);
      $("input").val("");
      $(".removeitem").on("click", function() {
        $(".list-item li:last-child").remove();
      });
    }
  });
});

Answer 1

您要为具有removeitem类的每个元素的additem类添加一个单击处理程序。这将导致几个事件做同样的事情。在点击功能上点击另一个点击功能，如下所示。

$(document).ready(function() {
  $(".additem").on("click", function() {
    var val = $("input").val();
    if (val !== "") {
      var elem = $("<li></li>").text(val);
      $(".list-item").append(elem);
      $("input").val("");
    }
  });
  $(".removeitem").on("click", function() {
    $(".list-item li:last-child").remove();
  });
});

Answer 2

将删除侦听器放在添加侦听器旁边。

$(".additem").on("click", function() {
  var val = $("input").val();
  if (val !== "") {
    var elem = $("<li></li>").text(val);
    $(".list-item").append(elem);
   // $("input").val("");
  }
});
$(".removeitem").on("click", function() {
  $(".list-item li:last-child").remove();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type- 'text'/>
<input type='button' class='additem' value='Add' />
<input type='button' class='removeitem' value='Remove' />
<ul class='list-item'>

</ul>

Answer 3

首先获取ul元素的长度，然后通过索引删除最后一个li元素，

$（＆＃34;＃btnid＆＃34）。单击（函数（）{
var val = $（＆＃39; ul li＆＃39;）。长度;
$（＆＃34; ul li＆＃34;）。eq（val-1）.remove（）;

}）;

Answer 4

程序中的问题是，每次向列表中添加元素时，都会在删除按钮中添加一个单击事件侦听器

我将更深入地解释您的代码如何工作，以便您了解问题：

首先，这是我们的页面，我们将以此为例进行处理：

我们的javascript代码：

var i = 0;
$(document).ready(function(){
  $(".additem").on("click", function(){
    var val = $("input").val();
    if(val!=="") {
      var elem = $("<li></li>").text(val);
      $(".list-item").append(elem);
      $("input").val("");
      $(".removeitem").on("click", function() {
        i++;
        console.log("Call Remove Event " + i);
        $(".list-item li:last-child").remove();
      });
    }
  });
});

第一次致电：当您将item10添加到列表中时，删除点击事件监听器会在您的删除按钮中添加一次，当您点击删除item10时，只会从列表中删除

还有控制台输出：Call Remove Event 1

第二次调用：当您将item10添加到列表中时，删除点击事件监听器将被添加2次以删除按钮，当您点击删除item10和{ {1}}将从列表中删除

控制台输出：

item9

原因是当您点击删除按钮时，列表的最后一个元素将被删除2次，就像您点击两次删除按钮一样。

第三次调用：当您将Call Remove Event 2 Call Remove Event 3添加到列表中时，删除点击事件监听器将被添加3次以删除按钮，当您点击删除item9时，{{ 1}}和item9将从列表

中删除

控制台输出：

item8

要解决此问题，您可以使用event.stopImmediatePropagation()尝试这种方式：

item7

此方法将使Call Remove Event 4 Call Remove Event 5 Call Remove Event 6元素上的任何其他处理程序不被执行。

或者只是将$(document).ready(function(){ $(".additem").on("click", function(){ var val = $("input").val(); if(val!=="") { var elem = $("<li></li>").text(val); $(".list-item").append(elem); $("input").val(""); $(".removeitem").on("click", function(e) { e.stopImmediatePropagation(); $(".list-item li:last-child").remove(); }); } }); });放在点击功能removeitem范围之外的点击功能上，它会正常工作：

removeitem

如何从ul（jQuery）中删除最后一个li？

4 个答案: