Details about empty, remove, and detach_jquery in jQuery

Empty, remove, and detach all have the function of removing elements, but the subtle differences make their missions different. The following describes the differences between empty, remove, and detach in jQuery. If you are interested, let's take a look at them and use a comparison table to explain the differences between several methods.

All three have the function of removing elements, but the subtle differences make their missions different.

The most authoritative explanation is of course jQuery_API. below is the part of the API about him or her.

I. empty:

This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. this is because, according to the DOM specification, any string of text within an element is considered a child node of that element. to avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves. if you want to remove elements without destroying their data or event handlers (so they can be re-added later), use. detach () instead.

Note: If the child element is removed through empty, the child element is removed.

Why?

Prevent Memory leakage !!!

Ii. remove:

Similar. empty (),. remove () method takes elements out of the DOM. use. remove () when you want to remove the element itself, as well as everything inside it. in addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. to remove the elements without removing data and events, use. detach () instead.

Like the empty method, remove removes the event handle of the element to avoid Memory leakage.

Difference: remove contains the removal event, and empty is a descendant element.

Iii. detach:

From the introduction of empty and remove (italic text), we can learn more or less that detach will not remove the event handle.

Let's take a look at the detailed API explanation:

The. detach () method is the same. remove (), doesn t that. detach () keeps all jQuery data associated with the removed elements. this method is useful when removed elements are to be reinserted into the DOM at a later time.

What does it mean?

After reading the detach annotation, I don't know if you have a bright eye. detach cannot be used to delete discarded elements.

Why?

Because it retains the event driver, won't it cause memory leakage.

Use empty or remove to delete elements that are no longer used.

What is the purpose of detach?

It is very useful.

When we want to add, delete, modify, and delete an element on a large scale, we can use detach to extract the element and perform operations on it, instead of operating in the entire dom document.

The advantage is: reduce the modification of the entire dom document, thus reducing page re-painting; and the operation of the entire dom document may also cause memory leakage in ie. Therefore, to be secure, use the "detach" artifact.

The following is a demo. First, bind the click Event (event Delegate) to the # container element, use detach to detach it from the document, and then create two child elements and append them to the # container element, add the # container to the body again.

 JQuery