Differences between detach(), hide() and remove() - jQuery

Question

What is the functional difference between these three jQuery methods:

• detach()
• hide()
• remove()

Answer 1

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'); 

Answer 2

Imagine a piece of paper on a table with some notes written with pencil.

• hide -> throw a clothe onto it
• empty -> remove the notes with an eraser
• detach -> grab the paper in your hand and keep it there for whatever future plans
• remove -> 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.