Home > Developer > Web Develop
Recently have been puzzled about the specific differences between the three methods, and then want to understand the specific differences, read some instructions, also in accordance with the official documents, finally the three methods to understand, it is true Kung Fu, continue to work hard.
In the text, the first simple introduction of the following three ways
. Empty () Description: removes all child nodes of a matching element in the collection from the DOM.
This method does not accept any parameters.
This method not only removes the child elements (and other descendant elements), but also removes the text from the element. Because, according to the instructions, any text string in the element is considered to be a child of that element. Take a look at the following HTML:
class="container"> class="Hello" >Hello</div> class="goodbye">goodbye</div ></div>
We can remove any element inside.
1 $ ('. Hello'). empty ();The result text Hello text is deleted:
1 class="container">2 class="Hello" "></div>3 class="goodbye" >Goodbye</div>4 </div>
If it <div class="hello"> contains any number of nested elements, they will be removed as well.
To avoid a memory leak, jquery removes the child element's data and event handlers first, and then removes the child elements.
If you want to delete elements, do not break their data or event handlers (the information of these bindings can also be added back later), please use .detach() instead.
. Detach () Description: removes all matching elements from the DOM.
.detach()Method and .remove() , in addition to .detach() saving all jquery data, is associated with the removed element. This method is useful when you need to move an element and soon insert the element into the DOM.
1<! DOCTYPE html>234<style>p {background:yellow; margin:6px0; } p.off {background:black;} </style>5<script src="Http://code.jquery.com/jquery-latest.js"></script>67<body>8<p>Hello</p>9 How isTen<p>you?</p> One<button>attach/detach paragraphs</button> A<script> -$("P"). Click (function () { -$( This). Toggleclass ("off"); the }); - varp; -$("Button"). Click (function () { - if(p) { +P.appendto ("Body"); -p =NULL; +}Else { Ap = $ ("P"). Detach (); at } -});</script> - -</body> -
The . Remove Description: removes a collection of matching elements from the DOM. (also remove events and jQuery data from the element.) )and .empty() similar. .remove()moves the element out of the DOM. We use it when we want to remove the element itself .remove() , and it also removes everything inside the element, including the bound event and the jquery data associated with that element. The elements to be removed do not delete data and events in case of use .detach() instead.
1 class="container">2 class=" Hello">Hello</div>3 class="goodbye ">Goodbye</div>4 </div>
You can remove any element that you want to remove:
$ ('. Hello'). Remove ();
The results are as follows:
1 class="container">2 class=" Goodbye">Goodbye</div>3 </div>
If <div class="hello"> there are child elements inside the element, they will be removed as well. There are also events on the element and jQuery data will be deleted.
We can also add an optional selector parameter to filter the matching elements. For example, the preceding code can be rewritten as:
1 $ ('div'). Remove ('. Hello');
The result will be the same:
1 class="container">2 class=" Goodbye ">Goodbye</div>3 </div>
Example:
Example:remove all paragraphs from the DOM:1<! DOCTYPE html>234<style>p {background:yellow; margin:6px0; }</style>5<script src="Http://code.jquery.com/jquery-latest.js"></script>67<body>8<p>Hello</p>9 How isTen<p>you?</p> One<button>call Remove () on paragraphs</button> A<script> -$("Button"). Click (function () { -$("P"). Remove (); the }); -</script> - -</body> +Above is some basic concepts, so that everyone waiting, after my test to draw the following conclusions. The empty () method has no parameters, and the empty subset and text cannot be restored. The detach () and remove () methods can be stored in a variable
If the declaration variable p is written in the following form
1 var p=$ ('P'). Remove ();
You can add the following directly when you need to add new
1 P.appendto ("body");
This is the function of both the detach () and the Remove () methods. Remove () differs from detach () except that remove () removes the specified class such as remove (' a '), while detach () is not allowed to do so, and it is also important to note that when an element is removed with the Remove () method, and then added, the event of the subset does not exist. Events of the detach () subset can also be executed.
If you do not understand or are not clear can comment at any time, we learn and progress together.
Explore the difference between empty,remove and detach in the jquery approach
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
