複数の要素を削除したい！
以下のように実行をクリックするとfizzbuzzが表示されるコードを書いた。
しかし、このままだと２回目以降の結果が前回の結果の下に表示される。
クリック毎に前回の結果を消去して、新しい結果を表示するようにしたい。
remove()を使おうと思ったが、どうやらremove()は一つの要素しか消去できない。
なので、他の方法を調べてみた。
結論から言うと、
子要素がなくなるまで一つずつループ処理で削除する！！
にたどり着きました。
<html>
<body>
<main>
<form action="#" id="form">
<input id='calNum' type='button' value='実行' >
</form><br>
<div>[結果]</div>
<p id='pFizzBuzz'></p>
</main>
<script>
'use strict'
const btn = document.getElementById('calNum');
btn.addEventListener('click',startFizzBuzz,false);
function startFizzBuzz(){
for(let i = 1; i < 100; i++){
if(i % 15 === 0){
const p = document.createElement('p');
const pText = document.createTextNode('FizzBuzz' + i);
pFizzBuzz.appendChild(p).appendChild(pText);
}else if(i % 3 === 0){
const p = document.createElement('p');
const pText = document.createTextNode('Buzz' + i);
pFizzBuzz.appendChild(p).appendChild(pText);
}else if(i % 5 === 0){
const p = document.createElement('p');
const pText = document.createTextNode('Fizz' + i);
pFizzBuzz.appendChild(p).appendChild(pText);
}
};
};
</script>
</body>
</html>
innerHTMLで要素の中身に空を代入する。
とても便利なinnerHTML。
空を代入することで１行で指定した要素の子要素を全て消してくれます。
構文
const content = element.innerHTML;
element.innerHTML = htmlString;
この場合は
pFizzBuzz.innerHTML = '';
を関数startFizzBuzzのすぐ下に書くことで、作られた要素pを全て消した上で新しい結果が表示されます。
しかしinnerHTMLは外部からの入力を受けつけてしまうため、セキュリティー上よろしくないとか既存の要素を破壊するとか、ボリュームがあるときに処理が遅いとか言われているので、他の方法も探してみた。
removeChildで複数の子要素を消す。
removeChildというメソッドもある。
構文
let oldChild = node.removeChild(child);
または
node.removeChild(child);
解説
・childはDOMから取り除きたい子要素
・nodeはchildの親要素
しかしremoveChild()も要素を一つしか削除することができない。
そこで、firstChildと組み合わせて最後の子要素が削除されるまでループ処理をする。
firstChild()
構文
let childNode = node.firstChild;
解説
childNode:nodeの最初の子要素。なければnullを返す。
ということで、この二つを組み合わせて
親要素(pFizzBuzz)の最初の子要素（firstChild）がなくなるまで、removeChildで削除し続ける。
書いてみるとこんな感じ。
const parent = document.getElementById('pFizzBuzz');
while(parent.firstChild){
parent.removeChild(parent.firstChild);
}
実際にコードに追加してみると。
<html>
<body>
<main>
<form action="#" id="form">
<input id='calNum' type='button' value='実行' >
</form><br>
<div>[結果]</div>
<p id='pFizzBuzz'></p>
</main>
<script>
'use strict'
const btn = document.getElementById('calNum');
btn.addEventListener('click',startFizzBuzz,false);
function startFizzBuzz(){
//~~~~~~~~~~~~~~追加しました~~~~~~~~~~~~~~~~
const parent = document.getElementById('pFizzBuzz');
while(parent.firstChild){
parent.removeChild(parent.firstChild);
};
//~~~~~~~~~~~~~~~追加しました~~~~~~~~~~~~~~~~
for(let i = 1; i < 100; i++){
if(i % 15 === 0){
const p = document.createElement('p');
const pText = document.createTextNode('FizzBuzz' + i);
pFizzBuzz.appendChild(p).appendChild(pText);
}else if(i % 3 === 0){
const p = document.createElement('p');
const pText = document.createTextNode('Buzz' + i);
pFizzBuzz.appendChild(p).appendChild(pText);
}else if(i % 5 === 0){
const p = document.createElement('p');
const pText = document.createTextNode('Fizz' + i);
pFizzBuzz.appendChild(p).appendChild(pText);
}
};
};
</script>
</body>
</html>
まとめ
複数の子要素を一度に削除したい場合
手取り早いのはinnerHTML
でもあまり推奨されていないようなので、その場合は以下の通り。
while(parent.firstChild){
parent.removeChild(parent.firstChild)
}
まとめて削除が無理なら
一個ずつループ処理で消す！！
参考サイト
element.innerHTML |MDN
Node.removeChild |MDN
Node.firstChild |MDN