Javascript DOM要素が存在する場合は削除

Question

クリックしたときにアイテムをDOMに追加するイベントリスナーを持つボタンがあります。 後続のボタンクリック時に追加された要素をクリアする関数を追加したいと思います。

私が試したことはありますが、「divは未定義」となっています。

function appendStuff(data) { 
    for (let i = 0; i < data.length; i++) { 
    let body = document.querySelector('body'); 
    let div = document.createElement('div'); 
    let id = document.createElement('h1'); 
    div.appendChild(id) 
    body.appendChild(div) 
    } 
}; 

button.addEventListener('click', (event) => { 
    clearDOM(), appendStuff() 
}); 

function clearDOM() { 
if (div.document.body) { 
let removeDiv = document.getElementsByTagName("div"); 
document.body.removeChild(removeDiv); 
} 
}; 

ワンクリック後にボタンを無効にすることをお勧めします。

ここでのキャッチは、初めてボタンをクリックしたときにDOMにdiv要素がないことです。それはエラーを投げているようだ。 If文がそれを回避することを期待していました。

Answer 1

すべてのdiv要素を削除することは最適ではない可能性があります。代わりに、クラスのようなより具体的なセレクタを使用してください。 div要素を作成中

、それにクラスを追加し、明確な方法でクラス

function appendStuff(data) { 
 
    let body = document.querySelector('body'); 
 
    let ct = document.createDocumentFragment(); 
 
    for (let i = 0; i < data.length; i++) { 
 
    let div = document.createElement('div'); 
 
    let id = document.createElement('h1'); 
 
    div.className = 'my-class'; 
 
    div.appendChild(id) 
 
    ct.appendChild(div) 
 
    } 
 
    body.appendChild(ct) 
 
}; 
 

 

 
button.addEventListener('click', (event) => { 
 
    clearDOM(), appendStuff([{}, {}, {}, {}]) 
 
}); 
 

 
function clearDOM() { 
 
    var divs = document.querySelectorAll('.my-class'); 
 
    Array.from(divs).forEach((div) => div.remove()) 
 

 
};

h1 { 
 
    min-height: 20px; 
 
    background-color: red; 
 
}

<button id="button">Add</button>

Answer 2

コードには複数の問題があります。

function clearDOM() { 
    if (div.document.body) { 
    let removeDiv = document.getElementsByTagName("div"); 
    document.body.removeChild(removeDiv); 
    } 
}; 

まず、コードを正しくインデントします。また、関数にはセミコロンを終了する必要はありません。

とにかく、上記では、div.document.bodyは何も意味しません。 divは未定義の変数です。あなたは何を確認しようとしていますか？このifの状態を削除します。

第2に、getElementsByTagNameはノードのリストを返します。そのノードは直接removeChildできません。あなたは、ループする必要があります：

let removeDivs = document.getElementsByTagName("div"); 
for (let i=0; i<removeDivs.length; i++) document.body.removeChild(removeDivs[i]); 

それはあなたのコードが動作する方法に影響を与えませんが、事前にすべての新しい要素を作成し、DocumentFragmentを使用して、一度にすべてを挿入するためのより良い習慣です。

function appendStuff(data) { 
    let frag = document.createDocumentFragment(); 

    for (let i = 0; i < data.length; i++) { 
    let div = document.createElement('div'); 
    let id = document.createElement('h1'); 
    div.appendChild(id); 
    frag.appendChild(div); 
    } 

    document.body.appendChild(frag); 
} 

ところで、体を得るためにquerySelectorを使用する必要はありません。それはdocument.bodyにあります。