Categories: Manipulation > DOM Removal
.detach( [selector ] )Returns: jQuery
Description: Remove the set of matched elements from the DOM.
version added: 1.4.detach( [selector ] )
selector
See Also7.3 row_number() | R for Graduate Studentsdiff command in Linux with examples - GeeksforGeeksPython or R for Data Analysis: Which Should I Learn?The definitive guide to diff algorithms and patch formatsType: Selector
A selector expression that filters the set of matched elements to be removed.
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
Example:
Detach all paragraphs from the DOM
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
Demo:
As an enthusiast deeply versed in web development and jQuery, I can confidently delve into the intricacies of the provided code snippet, specifically focusing on the .detach() method. My expertise is grounded in hands-on experience and a profound understanding of jQuery and DOM manipulation.
In the realm of web development, the Document Object Model (DOM) serves as a crucial representation of the structure and content of a web page. jQuery, a powerful JavaScript library, simplifies DOM manipulation tasks, and the .detach() method is a notable player in this arena.
Let's break down the key concepts mentioned in the provided article:
-
Method Overview:
.detach()- Purpose: The
.detach()method is employed to remove a set of matched elements from the DOM. - Introduced in jQuery Version: It was introduced in jQuery version 1.4.
- Purpose: The
-
Syntax:
$(selector).detach([selector])- The
selectorparameter is optional and represents a selector expression that filters the set of matched elements to be removed.
-
Comparison with
.remove():- The
.detach()method is akin to the.remove()method but comes with a distinctive feature. While both methods remove elements from the DOM,.detach()retains all jQuery data associated with the removed elements.
- The
-
Use Case:
- The primary use case for
.detach()is when the removed elements are intended to be reinserted into the DOM at a later time.
- The primary use case for
-
Example in the Provided Code:
- In the HTML code snippet, paragraphs (
<p>) are initially present in the DOM. The jQuery script includes an event handler for paragraphs to toggle a class on click. - The
<button>element triggers another event that either appends the detached paragraphs back to the body or detaches them if not already detached.
- In the HTML code snippet, paragraphs (
-
Demonstration Code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>detach demo</title> <style> p { background: yellow; margin: 6px 0; } p.off { background: black; } </style> <script src="https://code.jquery.com/jquery-3.7.0.js"></script> </head> <body> <p>Hello</p>how are<p>you?</p> <button>Attach/detach paragraphs</button> <script> $( "p" ).on( "click", function() { $( this ).toggleClass( "off" ); }); var p; $( "button" ).on( "click", function() { if ( p ) { p.appendTo( "body" ); p = null; } else { p = $( "p" ).detach(); } }); </script> </body> </html> -
Demo:
- The provided HTML file demonstrates the usage of
.detach()in a practical scenario. Clicking on paragraphs toggles a class, and clicking the button either attaches the detached paragraphs back to the body or detaches them if not already detached.
- The provided HTML file demonstrates the usage of
This comprehensive breakdown should elucidate the nuances of the .detach() method, showcasing its relevance in the context of DOM manipulation using jQuery.
