removeChildメソッド

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

構文

javascript親要素.removeChild(要素);

例

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

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

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

parent.removeChild(elem);

コード実行結果:

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

例

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

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

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

コード実行結果:

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

関連項目