JavaScript で要素内の子要素を削除する方法

ここでは、要素内の子要素を削除する removeChild メソッドについて記述してみます。

要素内の子要素を削除する / .removeChild

このメソッドを使用する場合は、以下のように記述します。

要素オブジェクト.removeChild(削除対象の子要素)

removeChild メソッドは、オブジェクトとなる要素の直下にある子要素のみを対象とし、オブジェクト内から削除を行います。

サンプル

このサンプルは、JavaScript での要素の生成と追加で利用したサンプルに、削除ボタンを設置しただけです。

ソースコードでは、削除部分のみを表示するようにしています。




この文章の前後に要素が追加されます。

後書き

上でも記述したように、removeChild メソッドは、オブジェクト直下の子要素を削除するものです。

なので、削除対象の要素が取得できているなら、以下のように記述することもできます。

element.parentNode.removeChild(element);

このように、特定の要素を削除したい場合は、parentNode を利用して親要素をオブジェクトにしましょう。

スポンサードリンク

inserted by FC2 system