Differences between detach(), hide() and remove() - jQuery
hide() sets the matched element's display to none.
detach() removes the matched elements, including all text and child nodes.
This method stores all the data associated with the element and so can be used to restore the element's data as well as event handlers.
remove() also removes the matched elements, including all text and child nodes.
However, in this case only the element's data can be restored, not its event handlers can't.
hide() sets the matched elements' CSS display property to none.
remove() removes the matched elements from the DOM completely.
detach() is like remove(), but keeps the stored data and events associated with the matched elements.
To re-insert a detached element into the DOM, simply insert the returned jQuery set from detach():
var span = $('span').detach();
...
span.appendTo('body');
Imagine a piece of paper on a table with some notes written with pencil.
hide-> throw a clothe onto itempty-> remove the notes with an eraserdetach-> grab the paper in your hand and keep it there for whatever future plansremove-> grab the paper and throw it to the dustbin
The table represents the current DOM space, the paper represents the element, and the notes represent the contents (child nodes) of the element.
A bit simplified and not completely accurate, but easy to understand.