[JavaScript]複数の子要素を削除する。

2020年8月7日 22:06

複数の要素を削除したい！

以下のように実行をクリックすると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で複数の子要素を消す。

構文
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で削除し続ける。

書いてみるとこんな感じ。


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

まとめ

複数の子要素を一度に削除したい場合
手取り早いのはinnerHTML
でもあまり推奨されていないようなので、その場合は以下の通り。

while(parent.firstChild){
    parent.removeChild(parent.firstChild)
}

まとめて削除が無理なら
一個ずつループ処理で消す！！

参考サイト
element.innerHTML |MDN
Node.removeChild |MDN
Node.firstChild |MDN