Home > Developer > JavaScript
Introduction:
These methods have been used in recent projects, and I feel a lot similar. I checked Jquery APIs and found many blog articles, but I still cannot understand the differences. Finally, I found the difference between a lot of materials and my own case verification, and did not dare to share it exclusively.
Method Introduction:
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.
This method not only deletes its subnodes, but also deletes the text fields of the node (according to DOM specifications, the text fields of the node are also considered as subnodes ).
Remove ([selector])
SelectorA selector expression that filters the set of matched elements to be removed.
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.
Similar to the empty method, the remove method also deletes elements from the DOM. When you want to delete the node itself and everything in the node, you can use the remove Method. In addition to the node itself, events bound to the node and JQuery data related to the node are also cleared. When you need to clear the node itself, but do not need to clear the bound events and data, you can use the detach method.
Detach ([selector])
SelectorA selector expression that filters the set of matched elements to be removed.
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.
The detach method is similar to the remove method, but it retains all JQuery-related data and bound events. This method will be useful when you want to add a new one after deletion.
Three differences:
Differences between empty, remove, and detach Methods
Method Name
Element itself (including all attributes)
Bind events and JQuery-related data
Text fields and subnodes
Empty ()
Do not delete
Do not delete
Delete
Remove ()
Delete
Delete
Delete
Detach ()
Delete
Do not delete
Delete
Example Verification:
Verification Environment: JQuery-1.8.0.min.js, Firefox 11.0, Firebug1.9.2;
1. Verify whether to delete the element book (including all attributes), text fields, and subnodes.
The Code is as follows:
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Test Jquery remove detach empty </title>
<Style> p {background: yellow; margin: 6px 0 ;}p. off {background: black ;}</style>
<Script src = "js/jquery-1.8.0.min.js"> </script>
<Script>
$ (Document). ready (function (){
$ ("P"). click (function (){
$ (This). toggleClass ("off ");
});
Var p;
$ ("# Button"). click (function (){
If (p ){
P. appendTo ("body ");
P = null;
} Else {
P = $ ("p"). detach ();
// P = $ ("p"). remove ();
// P = $ ("p"). empty ();
}
});
});
</Script>
</Head>
<Body>
<P id = "A"> Hello <span> subNode </span> </p>
How are
<P id = "B"> you? <Span> subNode </span> </p>
<Input type = "button" id = "button" value = "Attach/detach paragraphs"/>
</Body>
</Html>
Detach () method:
Execute the previous html dom Structure
Execute the html dom structure after deletion.
We can see that the detach method is used to delete all the attributes (IDs, etc.) of the element <p>, text fields, and their subnodes <span> subNode </span>.
Other methods are similar and can be verified. We will not repeat them here.
2. Verify the bound events and JQuery-related data.
Here, we need to note that binding events refer to events dynamically bound by JQuery, not events specified by element attributes. (The following is an example)
JQuery-related data, I don't know what it refers to, and I don't find any examples. I hope people of insight will be enlightened.
The following example only applies to binding events for your understanding:
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Test Jquery remove detach empty </title>
<Style>
P {
Background: yellow;
Margin: 6px 0;
}
P. off {
Background: black;
}
</Style>
<Script src = "js/jquery-1.8.0.min.js"> </script>
<Script>
$ (Document). ready (function (){
// JQuery dynamically binds a click event for the P tag
$ ("P"). click (function (){
$ (This). toggleClass ("off ");
});
Var p;
$ ("# Button"). click (function (){
If (p ){
P. appendTo ("body ");
P = null;
} Else {
P = $ ("p"). detach ();
// P = $ ("p"). remove ();
// P = $ ("p"). empty ();
}
});
});
</Script>
</Head>
<Body>
<P id = "A"> Hello <span> subNode </span> </p>
How are
<P id = "B"> you? <Span> subNode </span> </p>
<Input type = "button" id = "button" value = "Attach/detach paragraphs"/>
</Body>
</Html>
Run the page, click the button, and then click the button again to delete the <p> label and add it to the bottom of the body. Here we verify that, whether the BIND event click after rejoining is valid [click Event here is, click the P tag, and the class switches between yellow and black ].
1) Verify the detach Method
We can see that the detach method is executed. After the addition is re-added, the click Event dynamically bound by JQuery takes effect, indicating that the dynamically bound event was not deleted before.
2) Verify the remove Method
Modify the following parts of the program:
[Javascript]
// P = $ ("p"). detach ();
P = $ ("p"). remove ();
Test the remove function. It is also the effect of deleting and adding the function first:
After the remove method is called and the deleted tag is added to the body again, the event dynamically bound to JQuery is invalid. If you click the P tag, the class cannot be switched. This indicates that the events dynamically bound to JQuery have been deleted when the remove operation is executed.
3) Verify the empty method:
To verify the empty method, it is a little troublesome. After the deletion, the text is blank after the rejoining, and the test click event cannot be clicked. Therefore, we need to add a button, in this case, add text to facilitate the test of the click event.
The Code is as follows:
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Test Jquery remove detach empty </title>
<Style>
P {
Background: yellow;
Margin: 6px 0;
}
P. off {
Background: black;
}
</Style>
<Script src = "js/jquery-1.8.0.min.js"> </script>
<Script>
$ (Document). ready (function (){
// JQuery dynamically binds a click event for the P tag
$ ("P"). click (function (){
$ (This). toggleClass ("off ");
});
Var p;
$ ("# Button"). click (function (){
If (p ){
P. appendTo ("body ");
P = null;
} Else {
// P = $ ("p"). detach ();
// P = $ ("p"). remove ();
P = $ ("p"). empty ();
}
});
// Add text to the p tag after deletion
$ ("# ButtonA"). click (function (){
$ ("# A"). text ("Hello ");
$ ("# B"). text ("you? ");
});
});
</Script>
</Head>
<Body>
<P id = "A"> Hello <span> subNode </span> </p>
How are
<P id = "B"> you? <Span> subNode </span> </p>
<Input type = "button" id = "button" value = "Attach/detach paragraphs"/> <br/>
<Input type = "button" id = "buttonA" value = "addTextA"/> <br/>
</Body>
</Html>
Execution result
We can find that the empty method does not delete the dynamic binding event.
4) Supplementary explanation:
To better understand the binding event mentioned here is JQuery's dynamic binding event, let's modify the program, use the onclick attribute, and use the click event as a property value for static binding.
The modified program is as follows:
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Test Jquery remove detach empty </title>
<Style>
P {
Background: yellow;
Margin: 6px 0;
} Www.2cto.com
P. off {
Background: black;
}
</Style>
<Script src = "js/jquery-1.8.0.min.js"> </script>
<Script>
// Process the P tag click Event
Function clickHandler (element ){
$ (Element). toggleClass ("off ");
}
$ (Document). ready (function (){
Var p;
$ ("# Button"). click (function (){
If (p ){
P. appendTo ("body ");
P = null;
} Else {
// P = $ ("p"). detach ();
P = $ ("p"). remove ();
// P = $ ("p"). empty ();
}
});
});
</Script>
</Head>
<Body>
<P id = "A" onclick = "clickHandler (this)"> Hello <span> subNode </span> </p>
How are
<P id = "B" onclick = "clickHandler (this)"> you? <Span> subNode </span> </p>
<Input type = "button" id = "button" value = "Attach/detach paragraphs"/> <br/>
</Body>
</Html>
We use the remove Method again, delete it, And then append it to find that the event response is valid. In fact, the click event is used as an onclick attribute value of a static p element. It is valid after all appends.
To sum up, we can get the above comparison table of the three methods.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
