Detailed explanation of jQuery.remove() function usage

remove() 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 detach(), the remove() function will simultaneously remove the additional data (data() function) and event handler (detach()) associated with the element. will be retained).

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.remove( [ selector ] )

Parameters

Parameter Description

selector Optional/Specified by String type SelectorString, used to filter elements that match the selector.

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

Return value

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

Example & Description

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

Paragraph text 1item1 line2

Paragraph text 2item2line2

Paragraph text 1

Paragraph text 2

Take the following HTML code as an example:

[span#n2]

[label# n4]

Paragraph content

< span id="n6">[span#n6][span#n7]

The following jQuery sample code is used to demonstrate the specific usage of the remove() function:

var $n6 = $("#n6");

// Remove the n6 element

$n6.remove( );

var $p = $("p");

// Remove the p element with the class name "mark"

var $removedP = $p.remove( ".mark" ); // $removedP === $p

// Append the removed n6 to the body element Starting position

// Although n6 has been removed from the document previously

// it will not be removed from the jQuery object, so we can still use the jQuery object , put n6 into the document again

$n6.prependTo( "body" );

Run the code (please copy other codes to the demo page to run by yourself)

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

[span#n6][span# n7]

Paragraph content

The remove() function will remove the matching elements in the document, but it will not remove the matching elements from the jQuery object. However, remove() will only retain the element itself, and other such as additional data and bindings associated with the element. Certain events, etc. will be removed.

Please refer to the following HTML code:

< ;/p>

Next, we register click events for all buttons, then remove element n3, and then append the removed n3 to the end position inside n1:

var $ n3 = $("#n3");

$n3.data("myX", "Additional data");

document.writeln( $n3. data("myX") ); // Additional data

$n3.trigger("click"); // Pop-up prompt box information: Button 2

// Remove element n3

$n3.remove();

// Append n3 to the end of n1 again

$n3.appendTo("#n1");

// At this point, n3’s additional data and bound click events have been removed

document.writeln( $n3.data("myX") ); // undefined

$n3.trigger("click"); // No event response

If the click event is registered directly in the element node as an inline attribute, remove() cannot remove this Register event of the form:

onclick="alert('The click event cannot be removed');" />

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