javascript - 如何在 DOM 更改后检查元素是否为空？

Question

我有这个代码:

$(function() {
  $('.delete').click(function() {
    $(this).closest('li').remove();
  });

  $('#items').change(function() {
    if ($(this).is(':empty')) {
      alert('No more conditions');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="items">
  <li><a href="#" class="delete">Delete me</a></li>
</ul>

只要我点击链接，我就会得到一个空的 UL 但在 .change() 事件上使用 .is('empty') 不会触发警报。

在 DOM 更改后检查元素是否为空的正确方法是这样吗？如果不是，哪个才是正确的？

Note: the solution has to be compatible with older browsers like IE8

Answer 1

这个解决方案怎么样。希望对您有所帮助!

$(function() {
  $('.delete').click(function() {
  $(this).closest('li').remove();
  if ($('#items li').length === 0) {
  alert('No more conditions');
  }
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul id="items">
  <li><a href="#" class="delete">Delete me</a></li>
</ul>