JavaScriptで特定の親要素から子要素を動的に削除したい時に便利なremoveChild()メソッドの使い方

親要素内の特定の子要素を動的に削除するremoveChild()メソッド

JavaScriptで親要素内の特定の子要素を動的に削除したい時はremoveChild()メソッドを利用します。

このメソッドは親要素を軸として削除するため、親要素の取得が必要です。

メソッド

メソッド意味返り値
【親要素】.removeChild(削除対象要素)親要素内の削除対照要素を削除削除された要素(Element)

サンプルコード

サンプルコードとして、親要素を指定して、「子要素2」と書かれた要素を削除するスクリプトを紹介します。

Output
【removeChildで「子要素2」を削除】
親要素
子要素1
子要素2
子要素3
Pug
#targetArea 【removeChildで「子要素2」を削除】
		#targetParent 親要素
			.targetChild 子要素1
			.targetChild 子要素2
			.targetChild 子要素3
JavaScript
const targetParent = document.getElementById('targetParent'); 
const targetRemove = document.querySelector('#targetParent .targetChild:nth-child(2)');
targetParent.removeChild(targetRemove);
インストラクター
コメント

コメントを残す