jQuery .detach() Method

What Is .detach()?

.detach() removes matched elements from the DOM without wiping jQuery data or event handlers (since 1.4). Same removal as .remove(), but safe to reinsert later.

var stash = $("p").detach();     // off the page, data kept
stash.appendTo("body");          // back on — handlers still work

$(".item").detach(".gone")       // only items matching .gone

$("p").remove()                  // also clears jQuery data/events

How to Use .detach()

Remove, hold the return value, then reinsert when needed.

1. Select the element(s) to take off the page.
2. Call .detach() (optionally with a filter selector).
3. Store the returned jQuery collection in a variable.
4. Later call .appendTo() / .prependTo() on that stash.

Pseudocode

set = matched elements
if selector given:
    set = set.filter(selector)

for each el in set:
    remove el from its parent
    // keep jQuery .data() and .on() handlers

return set   // ready for appendTo / prependTo later

// Contrast:
remove(set)  → also wipe jQuery data and handlers

Cheat Sheet

Keep these facts handy while parking DOM nodes.

Live Preview

Toggle paragraphs off and on — handlers stay alive after .detach().

Click Run to detach or reattach paragraphs.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var p = $("p").detach();
console.log($("p").length);  // 0
console.log(p.length);       // still 3 (held in memory)

0
3

var p = $("p").detach();
// … later …
p.appendTo("#stage");

Paragraphs return inside #stage
Prior .on() handlers still fire

$("#a").data("n", 1).on("click", handler);
$("#b").data("n", 1).on("click", handler);

var kept = $("#a").detach();   // data + handler kept
$("#b").remove();              // data + handler cleared

kept.appendTo("#stage");       // click still works
// $("#b") is gone for good

detach → can reinsert with data
remove → cannot recover handlers

$(".item").detach(".temp");
// removes .item.temp only; other .item stay

.temp items detached
plain .item nodes remain

Performance Notes

Detach is ideal when you need nodes completely out of the document but want to avoid rebinding handlers. Do not stash huge trees forever.

Key Takeaways