Home > Developer > JavaScript
Summary of DOM Node Deletion methods in jQuery (ultra-Comprehensive), jquerydom
Preface
As we all know, removing a node from a page is a common operation for developers. jQuery provides several different methods to solve this problem. The following is a detailed introduction in this article. If you are interested, let's take a look.
I. empty
Empty, as its name implies, is a clearing method, but it is a little different from deleting because it only removes all subnodes in the specified element.
This method not only removes child elements (and other child elements), but also removes text from the elements. Because, according to the description, any text string in the element is considered as a subnode of the element. If we use the empty method to remove all the elements in the div, it just clears the internal html code, but the tag remains in the DOM, empty removes all p elements under the current div elementid=testThe div element is not deleted.
$ ("Button "). on ('click', function () {// use empty to remove all p elements under the current div element // The div elements whose id is test are not deleted $ ("# test "). empty ()})
Ii. remove
Like empty, remove is a method for removing elements. However, remove removes the elements themselves and removes everything inside the elements, includes bound events and jQuery data related to this element.
For example, if a node is bound to a click event, it is very easy to delete the node without using the remove method, but at the same time, the event must be destroyed to prevent "Memory leakage ", therefore, the front-end developers must pay attention to the number of events bound and remember to destroy them when they are not needed. The remove method is used to remove the div and all its internal elements. The event destruction method is automatically operated in the remove method, so it is very easy to use.
Remove expression parameters:
Remove is better than empty, where a selector expression can be passed to filter the Matching Element Set to be removed, and the specified node can be selectively deleted.$()Select a group of identical elements, and thenremove（）Pass filtering rules, such:$("p").filter(":contains('3')").remove().
<Body> <style>. test1 {background: # bbffaa ;}. test2 {background: yellow ;} </style>
Differences between empty and remove
When removing a specified element, jQuery providesempty()Andremove([expr])The two methods both delete elements, but the two are different.
Empty Method
empty()The method is not to delete a node, but to clear all child nodes in the element.Remove Method
Iii. detach
If we want to temporarily Delete the nodes on the page, but do not want the data and events on the nodes to be lost, and we can display the deleted nodes to the page in the next time period, at this time, you can use the detach method to process detach, which is literally easy to understand. Host a web element. That is, this element is removed from the current page, but the memory model object of this element is retained.
Official explanation:This method does not delete matching elements from the jQuery object, so you can use these matching elements in the future. Andremove()The difference is that all bound events and additional data are retained.$("div").detach()This sentence will remove the object, but the display effect is useless. But the memory still exists. After you append the file, it returns to the Document Stream again. It is displayed again.
Of course, the detach method is unique to JQuery, so it can only process events or data bound through the JQuery method.
Pass $("p").detach()After deleting all the P elements, put the deleted p on the page through append. You can click the text to test whether the event is lost.
<Body> <p> P element 1, bound to a click event by default </p> <p> P element 2, by default, a click event </p> <button id = "bt1"> click to delete the p element </button> <button id = "bt2"> click to move the p element </p>/ button> <script type = "text/javascript"> $ ('P '). click (function (e) {alert(e.tar get. innerHTML)}) var p; $ ("# bt1 "). click (function () {if (! $ ("P "). length) return; // deduplication // delete an element using the detach method // only the page is invisible, however, this node is still stored in the memory. // neither data nor events will be lost. p = $ ("p "). detach ()}); $ ("# bt2 "). click (function () {// Add the p element to the page. // The event still exists $ ("body "). append (p) ;}); </script> </body>
Difference between detach () and remove ()
JQuery is a very powerful tool library and is being developed at work. However, some methods are ignored because they are not often used or noticed.remove()Anddetach()It may be one of them, mayberemove()We use more, whiledetach()It may be rare.
A comparison table is used to explain the differences between the two methods.
| Method Name | Parameters | Events and data are also removed | Whether the element itself is removed |
| Remove | Support selector expression | Yes | Yes (when there is no parameter). If there is a parameter, it must be based on the range involved by the parameter. |
| Detach | The parameter is the same as remove | No | Case: remove |
Remove: remove a node
Detach: Remove a node.
remove()The difference is that all bound events and additional data are retained.$("p").detach()This sentence will remove the object, but the display effect is useless. But the memory still exists. After you append the file, it returns to the Document Stream again. It is displayed again.Summary
The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.
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
