ywork2020.com

Title

要素を削除する

目次 (INDEX)

removeとは

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

目次に戻る

removeメソッドの概要

このメソッドは、呼び出し元の要素を子要素を含めて削除します。

メソッドの引数には、セレクターを指定することができます。 この場合、呼び出し元の要素群から、引数に一致した要素のみを削除することになります。 引数が空の場合は、呼び出し元の要素群とその子要素ら全てが削除されます。

また、このメソッドを実行したときに、削除された要素オブジェクトが戻り値として返されます。 ただし、戻り値として取得した要素に関連付けていたスタイルは保持されますが、イベントは削除されます。

上記のアンダーラインが引いてある部分だけの違だけで、類似したメソッドとして detach() があります。

目次に戻る

構文

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

var removeElement = $(Selector).remove([Selector]);

目次に戻る

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

ここでは、span 要素を題材にします。 この要素には、mouseover イベントと mouseout イベントを登録して関数が働くようにしています。 これにより、要素上にマウスが乗る、または要素上からマウスが外れると、要素の背景色が変化します。

要素に下に配置してあるボタンをクリックすると、remove()によりこの要素は削除されます。この時の戻り値を変数にオブジェクトとして保存しておき、 その変数を使って削除した要素を再度、append() を使ってボタンの下部に追加します。

結果は再度追加された要素のスタイルはそのままですが、イベントは解除されているので関数は働きません。

サンプルコード: CSS
<style>
	span{
		display: block;
		border: thin solid currentColor;
		padding: 1em;
		margin: 1em 0;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>
		< span>Element SPAN< /span>
		<button id="idButton">Click</button>
	</div>
	<script>...</script>
</body>
  • 06-09: div (div要素です。ここでは、親要素です。)
  • 07: span (span要素です。この要素がメソッドの呼び出し元であり、削除の対象です。)
  • 08: button (ボタンです。クリックすると script 08 ~ 11 のコードが実行されます。)
サンプルコード: script
<script>
	$("div span").mouseover(function(){
		$(this).css({"background-color":"##lightblue", "color":"##red"});
	});
	$("div span").mouseout(function(){
		$(this).css({"background-color":"transparent"});
	});
	$("#idButton").click(function(){
		let elmSpan = $("div span").remove();
		$("div").append(elmSpan);
	});
</script>
  • 02-04: $("div span").mouseover(function(){処理}) (span 要素にマウスが乗ると 処理 を実行します。)
  • 03: $(this).css(プロパティと設定値) (ここでは、$(this)は span のことです。この要素のCSSを設定します。)
  • 05-07: $("div span").mouseout(function(){処理}) (span 要素からマウスが外れると 処理 を実行します。)
  • 06: $(this).css(プロパティと設定値) (ここでは、$(this)は span のことです。この要素のCSSを設定します。)
  • 08-11: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 09: let elmSpan = $("div span").remove() (span 要素を削除するとともに変数に代入して保存します。)
  • 10: $("div").append(elmSpan) (前行の変数に保存したオブジェクトを再度追加します。)

まず、span 要素にご自身でマウスオーバーとマウスアウトをしてみてください。次にボタンをクリックして要素の削除と再追加を実行してください。 再追加された span 要素ではマウスオーバーとマウスアウトのイベントが解除されていることが分かるはずです。

実行結果:
Element SPAN

類似したメソッドに detach() というのがあります。 これはイベントが解除されないように削除するためのメソッドです。 detach() のページでは同じ要素構成でメソッドだけを変えたサンプルを用意していますので、参考にしてください。

目次に戻る