JavaScript | HTMLから要素を削除する方法

2022-02-15JavaScript,javascript DOM操作

JavaScriptremove()メソッドまたはremoveChild()メソッドを利用して、指定したHTML要素をHTMLから削除する方法を紹介しています。

指定した要素を削除する

JavaScriptのremove()メソッドを使って指定した要素を削除する動作サンプルとサンプルコードです。

removeChild()メソッドでのサンプルコードは動作サンプル内でコメントアウトしています。

See the Pen JavaScript | Add HTML before elements by yochans (@yochans) on CodePen.

サンプルコードではHTMLに「#item」とid名を指定した<div>タグを設置しています。

<div id="item"></div>

remove()を使って要素を削除する

remove()メソッドは指定した要素を削除する事が可能です。

このメゾッドには指定可能なオプション引数はありません。

document.querySelector('#item').remove();

結果、HTMLから「$item」は削除されます。

removeChild()を使って要素を削除する

removeChild()は指定した要素の子要素を削除する事が可能なメソッドですが、第一引数に自身を指定することで指定要素を削除する事も可能です。

item = document.querySelector('#item');
item.parentNode.removeChild(item);

結果、HTMLから「$item」は削除されます。

指定したHTML要素の子要素を削除する

remove()メソッドやinnerHTMLを使って指定した要素の子要素を削除するサンプルコードになります。

removeChild()メゾッドも用意されていますが、引数に子要素自体を指定する必要があるので多くのケースではremove()メゾッドで解決します。

<div id="container">
	<p>JavaScript</p>
	<p>PHP</p>
</div>

全ての子要素を削除する

全ての子要素を削除する方法はいくつもありますが、単純にinnerHTMLで空の値を指定して削除する方法も簡単です。

document.querySelector('#container').innerHTML = ``;

特定のタグの子要素を指定して削除する

複数の種類のタグが子要素にあり、その中で特定のタグのみを削除する場合。

querySelectorAll()<p>タグの子要素を指定した場合、オブジェクトとして取得しますので反復させて削除する必要があります。
例えば、以下のコードではエラーとなります。

document.querySelectorAll('#container p').remove();

document.querySelectorAll(…).remove is not a function.

querySelectorAll()<p>タグの子要素をまとめて削除する場合は以下のようなコードになります。

let items = document.querySelectorAll('#container p');
for (const item of items) {
	item.remove();
}

最初(先頭)の子要素を削除する

指定したHTML要素の最初(先頭)の子要素を削除するにはfirstElementChildプロパティを利用します。

firstChildプロパティも用意されていますが、firstChildはサンプルのような改行が含まれている場合、改行もテキストノードとして取得してしまうので、HTML要素の指定には向いていません。

document.querySelector('#container').firstElementChild.remove();

最後(末尾)の子要素を削除する

指定したHTML要素の最後(末尾)の子要素を削除するにはlastElementChildプロパティが利用可能です。

document.querySelector('#container').lastElementChild.remove();