js - コンテナに子要素がないときの瞬間を追跡

Question

特定のhtmlコンテナに子ノードがないときを追跡する必要があります。現時点では、いくつかの機能を実行する必要があります。このマークアップのために

：

<div id="container"> 
    <div class="child square"></div> 
    <div class="child square"></div> 
    <div class="child square"></div> 
    <div class="child square"></div> 
    <div class="child square"></div> 
</div> 

各squareをクリックで削除される：

var container = document.getElementById('container'); 
var children = container.children; 

[].map.call(children, function(elem) { 
    elem.addEventListener('click', function(){ 
    this.remove(); 
    }) 
}); 

と私のcontainerが空である：私はいくつかの機能を実行する必要があり

<div id="container"></div> 

、いいえ、

01としましょう

function isEmpty(){ 
    alert('container is empty'); 
} 

これを行う方法？ ペンは：https://codepen.io/t411tocreate/pen/vWbrJW?editors=1111

Answer 1

MutationObserverを残しました。このような場合のために構成されています

// new Observer 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    if (mutation.type === 'childList') { 
     console.log(mutation.target.children.length); 
     if (!mutation.target.children.length) { 
     isEmpty() 
     } 
    } 
    });  
}); 
// only observe childList changes 
var config = { attributes: false, childList: true, characterData: false }; 
// start observation 
observer.observe(container, config); 
// switch off? 
/* observer.disconnect(); */ 

コンテナが空になったときhttps://codepen.io/sebilasse/pen/MOLXqw?editors=1111

にそれは常に起こるだろうとあなたはあなたのコンテナを観察することができます。それは特定の "ユーザーアクション"に煩雑ではないので、スパゲティコードを避けるために役立つかもしれません...

Answer 2

あなたはこのような何かを行うことができます。

は

function isEmpty(){ 
if(container.querySelectorAll('.square').length==0) 
    alert('container is empty'); 
} 

デモ：https://codepen.io/anon/pen/EbrRpN?editors=1111

Answer 3

はonclickの関数にチェックを追加します。

[].map.call(children, function(elem) { 
    elem.addEventListener('click', function(){ 
    this.remove(); 
    let remainingChildren = document.querySelectorAll('#container .child'); 
    if(remainingChildren.length == 0) {doSomething() }; 
    }) 
}) 
function doSomething() { // code goes here } 

Answer 4

これをイベントリスナーに追加するだけです。子供の要素数を照会し、それに応じて警告する必要があります。すべての子要素がある場合は、コールバックでチェックすることができ

WORKING DEMO

[].map.call(children, function(elem) { 
    elem.addEventListener('click', function(){ 
    this.remove(); 
    if(document.getElementById('container').children.length === 0) { 
     alert('container is empty'); 
    } 
    }) 

Answer 5

はあなたのためです

var container = document.getElementById('container'); 
 
var children = container.children; 
 

 
[].map.call(children, function(elem) { 
 
    elem.addEventListener('click', function(){ 
 
    this.remove(); 
 
    if (children.length == 0) { 
 
     empty(); 
 
    } 
 
    }) 
 
}); 
 

 
function empty(){ 
 
    alert('container is empty'); 
 
}

<div id="container"> 
 
    <div class="child square">1</div> 
 
    <div class="child square">2</div> 
 
    <div class="child square">3</div> 
 
    <div class="child square">4</div> 
 
    <div class="child square">5</div> 
 
</div>