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

jQuery empty remove detach

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.


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

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


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().


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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *