JavaScriptで特定の要素を動的に削除したい時に便利なremoveメソッドの使い方

特定の要素を動的に削除するremove()メソッド

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

removeChild()メソッドと挙動は大変似ていますが、remove()メソッドは返り値がなく、removeChild()メソッドは返り値として、削除されや要素を返すなど、異なる挙動がありますので、比較して使い分けられるようにしておくと良いでしょう。

メソッド

メソッド意味返り値
【削除対照要素】.remove()削除対照要素を削除なし
remove()

サンプルコード

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

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

コメントを残す