ywork2020.com

Title

ノードを削除する

目次 (INDEX)

removeとは

ここで説明するremove とは次の語句からなるjavascriptのメソッドです。
remove
読み: リムーブ
意味: 削除、取り除く

目次に戻る

removeメソッドの概要

このメソッドは、オブジェクトに関連付けられたノードを削除します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

Node.remove();

目次に戻る

サンプルコードと実行結果

このサンプルではdiv要素を使った親要素と子要素を使用します。

実行ボタンをクリックすると子要素がremove()メソッドで削除されます。

サンプルコード: CSS
<style>
	#idParent, #idChild{
		border: medium solid ##black;
		padding: 1em;
		text-align: center;
	}
	#idParent{
		height: 80px;
		width: 220px;
	}
	#idChild{
		background-color: ##deepskyblue;
	}
</style>
サンプルコード: HTML
<body>
	<div id="idParent">
		<div id="idChild">子要素 *削除対象*</div>
	</div>
	<p>
		実行:<br>
		<input type="button" value="ボタン" onclick="evtName()">
	</p>
</body>
  • 02: 親要素 (id="idParent")
  • 03: 子要素 (id="idChild")
  • 07: ボタン (クリックするとスクリプトのevtName()関数を実行します。)
サンプルコード: script
<script>
	let elmChild = document.getElementById("idChild");
	function evtName(){
		elmChild.remove();
	}
</script>
  • 02: ノードの取得 (elmChild = idChildの要素です。)
  • 03-05: 関数 (evtName()関数です。)
  • 04: 要素の削除 (elmChildを削除します。elmChild = idChildの要素です。)
実行結果:
サンプル要素
子要素 *削除対象*

実行:

目次に戻る