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

我试图创建一个列表，在其中添加元素，只有在按下“删除”按钮时才能逐个删除。不幸的是，有些奇怪的事情发生了，如果我添加了两个元素，删除按钮会同时删除它们

$(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();
      });
    }
  });
});

$（文档）.ready（函数（）{
$（“.additem”）。在（“单击”，函数（）{
var val=$（“输入”）.val（）；
如果（val！==“”）{
var elem=$（“
”）.text（val）；
$（“.list item”）.append（elem）；
$（“输入”）.val（“”）；
$（“.removietem”）。在（“单击”，函数（）{
$（“.list item li:最后一个子项”）.remove（）；
});
}
});
});

对于使用

additem

类的每个元素，您正在使用

removitem

类向所有元素添加一个单击处理程序。这将导致多个事件执行相同的操作。从另一个单击功能中取出单击功能，如下所示

$(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();
  });
});

$（文档）.ready（函数（）{
$（“.additem”）。在（“单击”，函数（）{
var val=$（“输入”）.val（）；
如果（val！==“”）{
var elem=$（“
”）.text（val）；
$（“.list item”）.append（elem）；
$（“输入”）.val（“”）；
}
});
$（“.removietem”）。在（“单击”，函数（）{
$（“.list item li:最后一个子项”）.remove（）；
});
});

将删除侦听器置于添加侦听器之外

$（.additem”）。在（“单击”，函数（）{
var val=$（“输入”）.val（）；
如果（val！==“”）{
var elem=$（“
”）.text（val）；
$（“.list item”）.append（elem）；
//$（“输入”）.val（“”）；
}
});
$（“.removietem”）。在（“单击”，函数（）{
$（“.list item li:最后一个子项”）.remove（）；
});


首先获取ul元素的长度，然后根据下面的索引删除最后一个li元素

$（“#btnid”）。单击（函数（）{

var val=$（'ul li'）。长度；

$（“ul li”）.eq（val-1）.remove（）；


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

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

首先，这是我们的页面，我们将以其为例：


还有我们的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();
      });
    }
  });
});


原因是，当您单击“删除”按钮时，列表的最后一个元素将被直接删除2次，就像您正在单击“删除”按钮两次一样

第三次调用：当您将
item9
添加到列表中时，删除单击事件侦听器将添加3次以删除按钮，当您单击删除
item9
时，
item8
和
item7
将从列表中删除

控制台输出：

Call Remove Event 2
Call Remove Event 3

Call Remove Event 4
Call Remove Event 5
Call Remove Event 6


要解决此问题，您可以使用以下方法进行尝试：

您正在嵌套单击事件。每次单击
.additem
，都会添加一个新的
.removietem
单击事件。只是不要嵌套这些事件请添加一些可运行的示例代码。这样更容易向您展示工作代码。非常感谢！我现在觉得很傻：）非常感谢！非常明确：）欢迎光临！如果答案解决了您的问题，请将其标记为已接受，以供将来参考。非常感谢！现在一切都很轻松：）如果答案解决了你的问题，请投票并接受答案。快乐编码：）
$(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();
      });
    }
  });
});

$(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();
  });
});