通过单击按钮删除其中一个后更新 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 li

var 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) {&nbsp; totalList.innerHTML = document.querySelectorAll(".navbar-nav li").length - 1});演示旁注 - 你不排除.titlelist 元素allList。我不确定这是否是故意的，但只是注意到它总是totalList会显示 1，即使你删除了所有“测试”项目......