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

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

以下のように実行をクリックするとfizzbuzzが表示されるコードを書いた。
しかし、このままだと２回目以降の結果が前回の結果の下に表示される。
**クリック毎に前回の結果を消去して、新しい結果を表示するようにしたい。**

remove()を使おうと思ったが、どうやらremove()は一つの要素しか消去できない。
なので、他の方法を調べてみた。

結論から言うと、
**子要素がなくなるまで一つずつループ処理で削除する！！**
にたどり着きました。

```html:HTML

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

この場合は

```JavaScript:JacaScript
pFizzBuzz.innerHTML = '';
```

を関数startFizzBuzzのすぐ下に書くことで、作られた要素pを全て消した上で新しい結果が表示されます。

しかし`innerHTML`は外部からの入力を受けつけてしまうため、セキュリティー上よろしくないとか[既存の要素を破壊する](https://qiita.com/amamamaou/items/624c22adec32515e863b)とか、[ボリュームがあるときに処理が遅い](https://freefielder.jp/blog/2015/09/javascript-remove-childnodes.html)とか言われているので、他の方法も探してみた。

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

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

```JavaScript:JavaScript
const parent = document.getElementById('pFizzBuzz');
 while(parent.firstChild){
   parent.removeChild(parent.firstChild);
 }
```
実際にコードに追加してみると。

```html:HTML

<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`
でもあまり推奨されていないようなので、その場合は以下の通り。

```javascript:JavaScript

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

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

##参考サイト
[element.innerHTML |MDN](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML)
[Node.removeChild |MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/removeChild)
[Node.firstChild |MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/firstChild)