removeChild() 要素を削除する

スポンサーリンク

要素を削除する場合は removeChild() メソッドを使用します。

書式

親要素.removeChild(削除要素)

上の記述では、削除したい要素の親要素に対して removeChild() メソッドを実行します。

特定のノードを削除したい場合は次のように記述します。

削除要素.parentNode.removeChild(削除要素)

この記述では、一度 parentNode で親要素を取得しています。

コード例

次のような親子関係のある要素を用意します。 親要素の id="parent" 、子要素の id="child" とします。


<div id="parent">
   親要素
    <div id="child">
        子要素
    </div>
</div>

子要素を削除する方法を2通りで記述してみます。

その1.親要素を取得する方法


// 親要素
var parent = document.getElementById('parent');
// 子要素
var child = document.getElementById('child');
// 削除
parent.removeChild(child);

その2.parentNode を使用する方法


// 子要素
var child = document.getElementById('child');
// 削除
child.parentNode.removeChild(child);

どちらの方法でも得られる結果は同じです。

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト