• JavaScript

【JavaScript】任意のイベントで子要素を全て削除する方法

JavaScriptで任意のイベントを実行したら、子要素を全て削除したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装サンプル

See the Pen
JavaScriptで子要素を全て削除 by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

ボタンを押すとリストが全て削除されます。

リストはul・li要素で構成。

ulの子要素であるli要素が全て削除された事になります。

実装方法は以下の通りです。

子要素を全て削除する

// 親要素
const ul = document.querySelector('ul');

document.querySelector('button').addEventListener('click', function () {
  // 子要素を全て削除
  while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  }
});

子要素を全て削除するコード例です。

子要素の親要素を変数に定義。

任意のイベントはクリックイベントを実行します。

addEventListenerを使いクリックイベントを定義。

コールバック関数に子要素を削除するコードを記述します。

子要素を削除するにはwhile文を使います。

whileの条件式に親要素.firstChildを指定。

親要素に子要素が存在したらループ処理を実行します。

whileの処理でremoveChildメソッドを使用。

removeChildは子要素のDOMを削除するメソッドです。

親要素の変数とremovechildを連結。

引数にwhileの条件式と同じく親要素.firstChildを指定。

子要素が全て削除されます。

以上で実装完了です。

まとめ

JavaScriptで任意のイベントを実行したら、子要素を全て削除する方法について紹介しました。

以上で解説を終わります。