javascript - .length 的事件监听器

Question

目前我有一个脚本可以计算文档中类的数量，但是，我正在使用另一个 jquery 脚本在单击时“.remove”类，但 .alerts 计数保持不变。我假设这是因为该文档需要一个事件监听器但似乎无法使其正常工作。

html-

 <ul>
 <li class="alert"> </li>
 <li class="alert"> </li>
 <li class="alert"> </li>
 </ul>

<div class="counter">3</div>

 document.getElementsByClassName("counter")[0].textContent
 =document.querySelectorAll("ul > .alert").length;

它显示正确的数量，但当它们被 jquery 删除时不会改变，任何帮助将不胜感激。

Answer 1

当元素被移除时，您可以调用一个函数来更新元素的当前 .length

$(function() {

  function count() {
    $(".counter").html($(".alert").length)
  }

  count();

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

  $("button").click(function() {
    $(".alert").eq(+$(this).prev("input").val()).remove();
    $(this).prev("input").attr("max", $(".alert").length)
    .val($(".alert").length -1)
    count()
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="alert">click</li>
  <li class="alert">click</li>
  <li class="alert">click</li>
</ul>

<div class="counter"></div>
<input type="number" min="0" max="2" value="2">
<button>remove alert</button>