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で文字列を大文字・小文字に変換する方法

2023.01.17
326
JavaScript

JavaScriptで小数点を切り上げ・切り捨て・四捨五入。整数にする方法

2023.01.13
313
JavaScript

【JavaScript】数値配列を昇順・降順にソートし、入れ替える方法

2022.06.09
2305
JavaScript

【JavaScript】同じ文字列を指定した回数繰り返して表示する方法

2023.01.24
291