detachとは
- ここで説明する detach とは次の語句からなるjQueryのメソッドです。
- detach
- 読み: デタッチ
意味: 切り離す
detachメソッドの概要
このメソッドは、呼び出し元の要素を子要素を含めて削除します。
メソッドの引数には、セレクターを指定することができます。 この場合、呼び出し元の要素群から、引数に一致した要素のみを削除することになります。 引数が空の場合は、呼び出し元の要素群とその子要素ら全てが削除されます。
また、このメソッドを実行したときに、削除された要素オブジェクトが戻り値として返されます。 この戻り値として取得した要素は、関連付けていたスタイルとイベントを保持します。
上記のアンダーラインが引いてある部分だけの違だけで、類似したメソッドとして remove() があります。
構文
サンプルを見る前に構文を確認しておきます。
var detachElement = $(Selector).detach([Selector]);サンプルコードと実行結果
ここでは、span 要素を題材にします。 この要素には、mouseover イベントと mouseout イベントを登録して関数が働くようにしています。 これにより、要素上にマウスが乗る、または要素上からマウスが外れると、要素の背景色が変化します。
要素に下に配置してあるボタンをクリックすると、detach()によりこの要素は削除されます。この時の戻り値を変数にオブジェクトとして保存しておき、 その変数を使って削除した要素を再度、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").detach();
$("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").detach() (span 要素を削除するとともに変数に代入して保存します。)
- 10: $("div").append(elmSpan) (前行の変数に保存したオブジェクトを再度追加します。)
まず、span 要素にご自身でマウスオーバーとマウスアウトをしてみてください。次にボタンをクリックして要素の削除と再追加を実行してください。 再追加された span 要素ではマウスオーバーとマウスアウトのイベントが、そのまま動作していることが分かるはずです。
実行結果:類似したメソッドに remove() というのがあります。 これはイベントを解除して要素を削除するためのメソッドです。 remove() のページでは同じ要素構成でメソッドだけを変えたサンプルを用意していますので、参考にしてください。