Detailed explanation of jQuery.detach() function usage-JS Tutorial-php.cn

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) andevent handlersetc. (remove()) associated with the element. will be removed).

This function belongs to thejQueryobject (instance).

Syntax

jQueryObject.detach( [ selector ] )

Copy after login

Parameters

Parameter Description

selector Optional/String type specified selectorString, 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 functionis of jQuery type and returns the current jQuery object itself.

Example & Description

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

段落文本1item1line2
 段落文本2item2line2
    段落文本1
 段落文本2
 以下面这段HTML代码为例：  [span#n2] 
  [label#n4] 
  段落内容 [span#n6][span#n7]

Copy after login

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" );

Copy after login

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

[span#n6][span#n7]
段落内容

Copy after login

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:

Copy after login

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

Copy after login

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!