How to use detach() method (.detach() vs .remove()) 1

We can easily achieve this task using jquery detach() method.

.detach()

.detach() method more over equal to .remove() method in jquery. The only difference is,

• .detach() method returns DOM element node & remove DOM element from DOM tree.
• .remove() method completely remove DOM element from DOM tree.

Using that returned DOM elements node, we can reinsert DOM element in a DOM tree.

definition from jquery api

"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."

 If we want to insert removed element, we should use .detach() method. otherwise we can simply use .remove() method.

$('selector').detach();

The above line will just remove the DOM element from our DOM tree. We should get the return value in variable for future insertion.

var detached =  $('selector').detach();

Variable detached contains the DOM node of removed DOM element.

If we want reinsert removed element, We can use like this,

$('selector').append(detached);

We can use .insertBefore(), .insertAfter(), .prepend() to replace append() method.



Here you can find the DEMO

Related Post How to change order of div (DOM element) (Recommended)