如何在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()事件上使用.change() .is('empty')不会触发警报。

这是在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

change事件不能与普通的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/

---

这样的事情应该有效：

 $(function() { $('.delete').click(function() { $(this).closest('li').remove(); handleChange(); }); function handleChange() { if ($('#items').children().length == 0) { 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> 

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

 $(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 }); }); 

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

Answer 6

尝试使用.children（）代替

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

 $('.delete').click(function() { $(this).closest('li').remove(); console.log( $('#items').children().length, $('#items').children() ); if (!$('#items').children().length) { 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> <li><a href="#" class="delete">Delete me</a></li> </ul> 

Answer 7

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

 $(function() { $('.delete').click(function() { $(this).closest('li').remove(); $.event.trigger("limodeified"); }); $(document).on("limodeified", function() { if ($("#items").html().trim() === "") { 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>