removeChildメソッド

メソッド removeChild は要素を削除することを可能にします。 親要素に適用され、削除したい要素を指定します。

構文

親要素.removeChild(要素);

段落 #elem を削除してみましょう。このためには、その親 #parent を取得し、取得した親に対してメソッド removeChild を適用し、メソッドのパラメータとして削除したい要素を渡します:

<div id="parent">
	<p id="elem">要素 1</p>
	<p>要素 2</p>
</div>

let parent = document.querySelector('#parent');
let elem = document.querySelector('#elem');

parent.removeChild(elem);

コード実行結果:

<div id="parent">
	<p>要素 2</p>
</div>

要素を削除する必要があるが、その親への参照がない場合、親は parentElement を通じて取得できます:

<div>
	<p id="elem">要素 1</p>
	<p>要素 2</p>
</div>

let elem = document.querySelector('#elem');
elem.parentElement.removeChild(elem);

コード実行結果:

<div id="parent">
	<p>要素 2</p>
</div>