Home > Featured Article > jQuery: Difference between remove(), empty() and detach() methods

jQuery: Difference between remove(), empty() and detach() methods

jQuery Difference between remove(), empty() and detach() methods

This post was most recently updated on September 28th, 2017

Definition:

  • remove() – Removes all child elements with selected element. In this method you can restore all data but not event handlers of removed elements from the DOM. All data and events related with elements will be removed.
  • empty() – Removes all content and child elements from the selected element. This method does not remove selected element.
  • detach() – Removes all child elements with selected elements. Even though it keeps all data and event handlers of the removed elements. This method is preferred to remove elements but it keeps copy of the removed elements which we can reuse at a later time.

Example:

HTML:

CODE:

Output:

remove(), empty() and detach() methods

Explanation: In the above example there are SPAN element and some content inside the DIV element. See there are three buttons remove(), empty(), detach().

When you click on “remove()” button it will remove the yellow box with all content and elements inside the yellow box.

When you click on “empty()” button it will remove all content and child elements inside the yellow box only empty yellow box will display.

When you click on “detach()” button it will remove all content and child elements inside the yellow box and yellow box too but it keeps all data and event handlers of the removed elements which we can reuse it at a later time.

DEMO

Click here to get more details about remove() and detach() methods.

This Article is TAGGED in , , , . BOOKMARK THE permalink.

3 thoughts on “jQuery: Difference between remove(), empty() and detach() methods

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">