Detailed explanation of jQuery.detach() function usage

The detach() function is used to remove matching elements from the document.

You can also use selectors to further narrow the scope of removal and only remove some of the currently matched elements that match the specified selector.

Compared with remove(), the detach() function will not remove additional data (data() function) and event handlers etc. (remove()) associated with the element. will be removed).

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.detach( [ selector ] )

Parameters

Parameter Description

selector Optional/String type specified selector String, used for Filters elements matching this selector.

If the selector parameter is not specified, all elements in the current matching element will be removed.

Return value

detach()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

The detach() function is used to remove matching elements from the document:

<p>段落文本1<span>item1<i>line2<i></span></p>
<p>段落文本2<span>item2<i>line2<i></span></p>
<!--以上是jQuery代码执行前的html内容-->
<script type="text/javascript">
$("span").detach( );
</script>
<!--以下是jQuery代码执行后的html内容-->
<p>段落文本1</p>
<p>段落文本2</p>
以下面这段HTML代码为例：
<p id="n1" class="mark">
    <span id="n2">[span#n2]</span>    
</p>
<p id="n3" class="mark">
    <label id="n4" class="move">[label#n4]</label>
</p>
<p id="n5">
    段落内容
    <span id="n6">[span#n6]<span id="n7">[span#n7]</span></span>    
</p>

The following jQuery sample code is used to demonstrate the specifics of the detach() function Usage:

var $n6 = $("#n6");
// 移除n6元素
$n6.detach( );
var $p = $("p");
// 移除带有类名"mark"的p元素
var $detachedP = $p.detach( ".mark" ); // $detachedP === $
// 将移除了的n6追加到body元素内的起始位置
// 虽然在前面n6已经从文档中被移除
// 但不会将其从jQuery对象中移除，因此我们还可以使用该jQuery对象，将n6再次放入文档中
$n6.prependTo( "body" );

The complete html code after the above code is executed is as follows (the format has not been adjusted):

<span id="n6">[span#n6]<span id="n7">[span#n7]</span></span>
<p id="n5">
    段落内容        
</p>

The detach() function will remove the matching elements in the document, but will not The matching element is removed from the jQuery object, and detach() will retain the additional data and bound events associated with the element.

Please refer to the following HTML code:

<p id="n1">
    <input id="n2" type="button" value="按钮1" />
    <input id="n3" type="button" value="按钮2" /> 
</p>

Next, we register click events for all buttons, then remove element n3, and then re-append the removed n3 to n1. End position:

var $n3 = $("#n3");
$n3.data("myX", "附加数据");
document.writeln( $n3.data("myX") ); // 附加数据
$n3.trigger("click"); // 弹出提示框信息：按钮2
// 移除元素n3
$n3.detach();
// 移除之后，仍然可以获取附加数据并触发点击事件
// document.writeln( $n3.data("myX") ); // 附加数据
// $n3.trigger("click"); // 弹出提示框信息：按钮2
// 将n3重新追加到n1内部的末尾
$n3.appendTo("#n1");
// 此时，n3的附加数据和绑定的点击事件仍然存在
document.writeln( $n3.data("myX") ); // 附加数据
$n3.trigger("click"); // 弹出提示框信息：按钮2

The above is the detailed content of Detailed explanation of jQuery.detach() function usage. For more information, please follow other related articles on the PHP Chinese website!