2021-03-31

JavaScript: removeChild() 要素を削除する

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

書式

親要素.removeChild(削除要素)

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

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

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

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

コード例

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

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

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

その１．親要素を取得する方法

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

その２．parentNode を使用する方法

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

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