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

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

指定した要素を削除する

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

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

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

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

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

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

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

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

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

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

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

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();

Posted by Yousuke.U

まだ、コメントがありません