.detach()

Categories: Manipulation > DOM Removal

.detach( [selector] ) Returns: jQuery

Description: Remove the set of matched elements from the DOM.

version added: 1.4.detach( [selector] )

selectorA 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

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p> 
  how are 
  <p>you?</p>
  <button>Attach/detach paragraphs</button>
<script>
    $("p").click(function(){
      $(this).toggleClass("off");
    });
    var p;
    $("button").click(function(){
      if ( p ) {
        p.appendTo("body");
        p = null;
      } else {
        p = $("p").detach();
      }
    });</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .detach() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .detach()? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

http://sunsean.myopenid.com/ sunsean

.detach() is possibly the best function added in 1.4
This allows removing elements from the DOM without destroying them which opens up large possibilities for keeping a clean DOM structure which helps the browser stay fast.
http://www.smartmenus.org/ Vasil Dinkov

This is indeed very very useful, thanks! Maybe an “empty()” version would be cool too, though I currently use:

$(selector).contents().detach();

which works too.
kuswantin

Any work around for jQuery 1.3.2? My CMS is still too far to deploy jQuery 1.4
http://furf.com/ furf

looking for an answer as well. for now gonna try:

$('.selector').clone(true).end().remove();
http://furf.com/ furf

elem.clone(true);
elem.remove();
http://bobkerns.typepad.com/ Bob Kerns

The documentation here is a little vague about just what jQuery data is retained. Event handlers?
Luke Maurer

Event handlers are retained, since they're stored using the data system.

(But yes, the docs should spell this out; other places are consistent in saying “event handlers and attached data” or some such.)
Luke Maurer

Event handlers are retained, since they're stored using the data system.

(But yes, the docs should spell this out; other places are consistent in saying “event handlers and attached data” or some such.)
http://www.mashdraggin.com James

Script must occur below elements in body (as shown in example). Tried this with the function as a script in the head element and it did not work.
jonas

@James – if you put the above example inside
$(document).ready( function() { … })
- then I am fairly sure, that you can put it anywhere – in the head element or in a separete script.
Davidxiaozhi

Nice !

jQuery API