Question

我有这段代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

注意：解决方案必须与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>

Answer 2

更改事件不能与纯DOM元素一起使用，它只能由输入类型元素使用。所以回答你的问题，不，这不是解决这个问题的适当方式，也不会有效。

您可能只需要在执行删除的事件处理程序中包含存在的检查。

$('.delete').click(function() {
    $(this).closest('li').remove();
    if ($('#items').is(':empty')) {
        alert('No more conditions');
    }
});

另一种方法是为您的特定项目元素设置Mutation Observer，但如果只是在每次删除后检查就足够了，那么这可能是过度的。

Answer 3

此活动仅限于元素，框和元素......

来自https://api.jquery.com/change/

这样的事情应该有效：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

删除子节点时，不会在ul元素上触发change事件。你需要一个MutationObserver。请注意，此功能在MSIE 10或更早版本中不可用。

$().ready(function documentReady() {
    console.log("%c Document Ready", 'color: #093');

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

    var observer = new MutationObserver(function(mutations) {
        if ( $("#items").find("li").length === 0) {
            console.log('No more conditions');
        }    
    });

    var targetNode = document.getElementById("items");
    observer.observe(targetNode, { childList: true });

    });
});

如果您需要旧版MSIE的类似功能，则可以使用类似（但较低级）的Mutation Events功能。检测MutationObserver并使用它（如果可用），否则，回退到MutationEvent。

Answer 5

您可以使用MutationObserver() childList和subtree选项设置为true

＆＃13;

$(function() {
  $(".delete").click(function() {
    $(this).closest("li").remove();
  });

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (!mutation.target.children.length) {
        console.log(mutation.target.id + " is empty. " + "No more conditions");
      }
    })
  });

  observer.observe($("#items")[0], {
    childList: true,
    subtree: true
  });
});

＆＃13;

<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>

＆＃13;

Answer 6

尝试使用.children()代替

它返回一个包含集合元素的jQuery对象（检查console.log()）。

＆＃13;

$('.delete').click(function() {
  $(this).closest('li').remove();
  console.log( $('#items').children().length, $('#items').children() );
  if (!$('#items').children().length) {
	  alert('No more conditions');
  }
});

＆＃13;

<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>
  <li><a href="#" class="delete">Delete me</a></li>
</ul>

＆＃13;

Answer 7

使用 jQuery自定义事件完成可能不是完美的方式，只是另一种选择。

＆＃13;

$(function() {
  $('.delete').click(function() {
    $(this).closest('li').remove();
    $.event.trigger("limodeified");
  });

  $(document).on("limodeified", function() {
    if ($("#items").html().trim() === "") {
      alert('No more conditions');
    }
  });
});

＆＃13;

<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>

＆＃13;

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

7 个答案: