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