Written by Kasumi

【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で任意のイベントを実行したら、子要素を全て削除する方法について紹介しました。

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

目次

関連記事

JavaScript

JavaScriptでHTMLの埋め込む場所を指定する方法

2022.10.17
916
JavaScript

JavaScriptでHTMLタグに属性を追加する方法

2023.01.08
6648
JavaScript

JavaScriptで連想配列をループで取り出す方法

2022.11.21
10648
JavaScript

JavaScriptで右クリックを無効・禁止にする方法

2022.12.07
1468