JQuery Basics - Understand the insight -3

JQuery provides different  ways to remove any element or its content from the DOM, we will do comparative study to understand the different between those.

Empty() - Remove all child nodes of the set of matched elements from the DOM.
It removes the content of the selector, NOT the node itself.  For example -
<div class="div1">Div1</div>
<div class="div2">Div2</div>
$(".div1").empty();
It will result in following html -

<div class="div1"></div>
<div class="div2">Div2</div>

If we had any child/nested element in it, then those would also been removed.

Remove() -Remove the set of matched elements from the DOM
It removes the complete element itself.
<div class="div1">Div1</div>
<div class="div2">Div2</div>
$(".div1").remove();
It will result in following html -

<div class="div2">Div2</div>
 
Detach() - Remove the set of matched elements from the DOM
detach is very much similar to remove(), except detach keeps all the jquery data like events subscribed, so that once we add this element again with DOM, all that data can be associate with this node again.