【JavaScript】DOM操作で子要素を削除する　removeChild

状況
最初の発想
次の発想
MDNにあったお手本

状況

次のようなHTML構成で、div1が親要素で、その子要素である<p>をすべて削除したいとき。

<div id="div1">
	<p>Lorem</p>
	<p>Ipsum</p>
	<p>Lorem</p>
	<p>Ipsum</p>
</div>

Parent.removeChild(child)というメソッドを使います。

最初の発想

幸いすべて同じ要素だったので、querySelectorAllで子要素をすべて取得。
取得した要素をそのままremoveChild

var div = document.querySelector('#div1');
var paragraph = document.querySelectorAll('#div1 > p');
div.remoceChild(paragraph);

=> エラー
Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

removeChildはノードを削除するメソッドです。querySelectorAllではNodeListオブジェクトがかえされるので、削除できませんということ。

次の発想

forEachでループを回して、一つずつ削除

var div = document.querySelector('#div1');
var paragraph = document.querySelectorAll('#div1 > p');

paragraph.forEach(p => div.removeChild(p));

MDNにあったお手本

whileの条件　div.firstChild が存在ー＞ true
divのfirstChildを削除

// while構文（firstChiid が存在する時)
var div = document.querySelector(#div1);
while (div.firstChild) {
  div.removeChild(div.firstChild);
}

今回調べて、firstChildというプロパティの存在をしれたのは大きかったです。よく似たのに、lastChildというのもあります。そういえば、cssでは　:nth-child()というのがありました。プログラミングでは、このようなプロパティは定番でありそうだなと思いました。