.empty() vs .remove() vs .detach() – jQuery

jQuery provides various methods to remove elements from DOM i.e. .empty(), .remove() and .detach(). So lets find out the difference between jQuery .empty(), .remove() and .detach() method.

.empty():

jQuery .empty() method removes all the child element of the matched element where remove() method removes set of matched elements from DOM.

$( ".content" ).empty();

remove():

jQuery .remove() method takes elements out of the DOM. So, if you want to remove the element itself, as well as everything inside it, you can use .remove(). In addition to the elements themselves, jQuery data associated with the elements and all bound events are removed.

$( ".content" ).remove();

So, you got the difference between .empty() and .remove(). And here, I am explaining what is .detach().

.detach():

jQuery .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. So, this method is useful when removed elements are to be reinserted into the DOM again.

$( ".content" ).detach();

Read Also:

• Difference between window.location.href and location.reload
• Difference between prop() and attr() in jQuery

Read the jQuery API Documentation for .empty(), .remove() and .detach() method.