「JavaScript」removeChild関数で複数の要素を削除する
書式
removeChild(child);
child Node で、 DOM から取り除きたい子ノードを指定します。
removeChild() は Node インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。 Node.cloneNode() とは異なり、返値は関連付けられた EventListener オブジェクトを保持します。
使用例
<!DOCTYPE html> <html> <body> <div id="city"> <div id="cityA"> <p>東京</p> </div> <div id="cityB"> <p>大阪</p> </div> </div> <input type="button" value="削除"> <script> function delFunc(){ //セレクタID「city」の要素の取得 const cc = document.getElementById("city"); for (let i=cc.childNodes.length-1; i>=0; i--) { //指定した要素が削除される cc.removeChild(cc.childNodes[i]); } } </script> </body> </html>
実行結果
「削除」ボタンを押下後、複数のdiv要素「cityA」、「cityB」が削除されます。