jQuery .detach() Method

What You’ll Learn

The .detach() method removes matched elements from the DOM while keeping jQuery data and event handlers intact. This tutorial covers syntax and optional selector filter (since 1.4), comparisons with .remove(), .empty(), and .appendTo(), the official toggle demo, and five practical try-it examples.

Introduction

Dynamic pages often need to reshuffle the DOM — hide a widget during a layout change, stash a tab panel, or batch updates without destroying user interactions. When removal is temporary, jQuery provides .detach().

Available since jQuery 1.4, .detach() works like .remove() at the DOM level: matched elements disappear from the document tree. The critical difference is what jQuery keeps in memory — event handlers bound with .on() and values stored with .data() survive detachment so you can reinsert nodes later.

Store the jQuery object returned by .detach(), then call .appendTo() or .prependTo() when you need the elements back. Use .remove() instead when nodes should be discarded permanently. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .detach() Method

.detach([selector]) removes matched elements from the DOM and returns the same jQuery collection. The nodes are no longer rendered, but jQuery’s internal references, bound events, and data cache remain attached to those DOM nodes in memory.

Pass an optional selector to filter which elements in the collection are detached. With no argument, every matched element is removed from the document. The return value is always the jQuery object (for chaining or storing), never a raw count or boolean.

📝 Syntax

jQuery .detach() supports two forms:

Detach all matched elements — since 1.4

.detach()

• Removes every matched element from the DOM.
• Returns the jQuery object with data and events preserved.

Detach with selector filter — since 1.4

.detach( selector )

• selector — a string filter; only elements in the collection that also match are detached.
• Useful when a parent collection contains mixed children you want to stash selectively.

Return value

• Always the jQuery object containing the detached elements.
• Chain .appendTo(), .prependTo(), or store in a variable for later.

Official toggle pattern

The jQuery API documentation demo detaches paragraphs on button click and reinserts them on the next click:

$( "p" ).click(function() {
  $( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
  if ( p ) {
    p.appendTo( "body" );
    p = null;
  } else {
    p = $( "p" ).detach();
  }
});

Examples Gallery

Examples 1–5 follow the official jQuery API documentation and common production patterns. Use DevTools or the Try-it links to run each snippet in the browser.

$( "p" ).click(function() {
  $( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
  if ( p ) {
    p.appendTo( "body" );
    p = null;
  } else {
    p = $( "p" ).detach();
  }
});

Click paragraph → toggles "off" class
Click button → paragraphs vanish from DOM (detached)
Click button again → paragraphs reappear; click still works



.detach() returns the same jQuery collection for reinsertion

var stashed = $( "#todo-list li" ).detach( ".inactive" );
$( "#archive" ).append( stashed );

Active items remain in #todo-list
.inactive items removed and appended to #archive
Selector filters the collection before detaching

$( "#action-btn" ).on( "click", function() {
  $( "#log" ).append( "<p>Clicked after detach!</p>" );
});
var btn = $( "#action-btn" ).detach();
btn.appendTo( "#panel" );

Button moved from original location to #panel
Click still logs "Clicked after detach!"
Handlers bound with .on() persist through detach

$( "#box-a" ).data( "score", 42 );
var detached = $( "#box-a" ).detach();
console.log( detached.data( "score" ) ); // 42

$( "#box-b" ).data( "score", 42 );
$( "#box-b" ).remove();
// $.data on #box-b is gone — element discarded

detached.data("score") → 42 (data intact)
After .remove(), jQuery data cache for #box-b is cleaned up



Use detach when widget state must survive temporary removal

var activePanel = null;

$( ".tab-btn" ).on( "click", function() {
  var target = $( this ).data( "tab" );

  if ( activePanel ) {
    activePanel.detach();
  }

  activePanel = $( "#" + target );
  activePanel.appendTo( "#tab-content" );
  $( ".tab-btn" ).removeClass( "active" );
  $( this ).addClass( "active" );
});

Switch tab → previous panel detached (not destroyed)
New panel appended to #tab-content
Form inputs and handlers inside panel preserved



Classic pattern for single-container tab UIs

🚀 Common Use Cases

• Tab interfaces — detach inactive panels, append the active one to a shared container.
• Layout reflow — stash widgets during responsive breakpoint changes without losing state.
• Modal staging — detach dialog content when closed, reinsert when reopened with handlers intact.
• Sortable lists — detach dragged items, append to new parent on drop.
• Batch DOM updates — detach a subtree, modify off-DOM, reinsert once to reduce reflows.
• Archive inactive rows — .detach(".done") moves completed items to a hidden archive node.

📝 Notes

• Available since jQuery 1.4 — optional selector filter included from the start.
• Functionally identical to .remove() at the DOM level; differs only in jQuery cleanup behavior.
• Event handlers bound with .on() and data stored with .data() are preserved.
• Detached elements are not visible but remain in memory until garbage-collected or reinserted.
• Store the returned jQuery object — re-querying by ID after detach may fail if the node is not in the document.
• Use .remove() when you will never need the nodes or their jQuery state again.
• .empty() clears children inside a parent; .detach() removes the matched elements themselves.

💡 Best Practices