通过单击按钮删除其中一个后更新 li 的数量

Question

我有很多列表，我需要在删除一个 li 后更新它们的总数，代码运行良好但在删除 li 后它没有更新，那么如何在删除一个后更新 li 的总数？我花了很长时间找到解决方案，但我失败了！var totalList = document.getElementById('total');var deleteBtn = document.getElementsByClassName('delete');var allList = document.querySelectorAll(".navbar-nav li");var removeNotify = function(e) {    e.preventDefault();  var notifyItem = $(e.delegateTarget).parent();  var html = $('html');  html.css('overflowX', 'hidden');  notifyItem.addClass(notifyItem.data('animation-class'));  notifyItem.bind('oanimationend animationend webkitAnimationEnd', function() {    notifyItem.remove();    html.removeAttr('style');  }); };$(function() {  $('.delete').on('click', removeNotify);  console.log(allList.length - 1);  });// total livar myList = document.getElementById('myList');$('.delete').on('click', 'li', function(ev){   totalList.innerHTML = allList.length - 1});        <div class="notifyNum align-center d-flex justify-content-center align-items-center mr-auto">          <span id="total" class="fontSize12"></span>        </div><ul id="myList" class="navbar-nav w-100 align-left">              <li class="nav-item title">                <h1 class="p-0 m-0 weight700 fontSize20 gray6">Notifications</h1>              </li>              <li id="1" class="nav-item" data-animation-class="minimize">                <h2 class="notifyTitle weight600 fontSize16 gray5 mb-2">test-1 </h2>                <span class="delete text-center">&times;</span>              </li>              <li id="2" class="nav-item" data-animation-class="minimize">                <h2 class="notifyTitle weight600 fontSize16 gray5 mb-2">test-2 </h2>                <span class="delete text-center">&times;</span>              </li>              <li id="3" class="nav-item" data-animation-class="minimize">                <h2 class="notifyTitle weight600 fontSize16 gray5 mb-2">test-3 </h2>                <span class="delete text-center">&times;</span>              </li>            </ul>

Answer 1

allList在单击函数中查询选择器。每次单击编码方式时，var 都allList不会更新。delete

以下是使其按您的意愿工作的快速方法。

更改 totalList.innerHTML = allList.length - 1为：

$('.delete').on('click', function(ev) {

  totalList.innerHTML = document.querySelectorAll(".navbar-nav li").length - 1

});

演示

旁注 - 你不排除.titlelist 元素allList。我不确定这是否是故意的，但只是注意到它总是totalList会显示 1，即使你删除了所有“测试”项目......