Summary of DOM Node Deletion Methods in jQuery (Super Comprehensive)

2021-07-13 04:13:14
OfStack

Preface

As we all know, it is common for developers to remove nodes from a page, and jQuery provides several different ways to deal with this problem. The following article will give a detailed introduction, and interested friends will come and have a look.

1. empty

empty, as its name implies, is an empty method, but it is a bit different from deleting, because it only removes all the child nodes in the specified element.

This method not only removes child elements (and other descendant elements), but also removes the text in the element. Because, according to the instructions, any text string in an element is regarded as a child node of the element. If we remove all the elements of div inside by the empty method, it just empties the inner html code, but the tag remains in DOM, and removes all p elements under the current div element by empty but itself id=test The div element of is not deleted.


 $("button").on('click', function() {
 // Pass empty Remove the current div All under the element p Element 
 // But in itself id=test Adj. div Element has not been deleted 
 $("#test").empty()
 })

2. remove

remove, like empty1, is a way to remove an element, but remove removes the element itself and also removes the 1-cut inside the element, including the bound event and the jQuery data associated with the element.

For example, if a node is bound to click on an event, it is actually very simple to delete this node without remove method, but at the same time, the event needs to be destroyed. This is to prevent "memory leakage", so front-end developer 1 must pay attention to how many events are tied, and when not in use, 1 must remember to destroy them. div and all its internal elements are removed by remove method, and remove will automatically operate the event destruction method inside remove, so it is very simple to use

remove expression parameters:

remove is better than empty in that it can pass a selector expression to filter the set of matching elements to be removed, and can selectively delete the specified nodes. We can pass the $() Select 1 set of the same elements, and then pass the remove（） Rules for passing filters, such as: $("p").filter(":contains('3')").remove() .


<body>
 <style>
 .test1 {
 background: #bbffaa;
 }
 
 .test2 {
 background: yellow;
 }
 </style>
 <h2> Pass jQuery remove Method to remove an element </h2>
 <div class="test1">
 <p>p Element 1</p>
 <p>p Element 2</p>
 </div>
 <div class="test2">
 <p>p Element 3</p>
 <p>p Element 4</p>
 </div>
 <button> Click through jQuery Adj. empty Remove Element </button>
 <button> Click through jQuery Adj. empty Removes the specified element </button>
 <script type="text/javascript">
 $("button:first").on('click', function() {
 // Delete the entire  class=test1 Adj. div Node 
 $(".test1").remove()
 })

 $("button:last").on('click', function() {
 // Find all p Element, contains the 3 Elements of 
 // So is this one 1 Processing of filters 
 $("p").remove(":contains('3')")
 })
 </script>
</body>

Difference between empty and remove

When removing a specified element, jQuery provides empty() And remove([expr]) 2 methods, both of which delete elements, but there is still a difference between them

empty method

Strictly speaking, empty() The method does not delete the node, but empties the node, which can empty all descendant nodes in the element
empty cannot delete the node itself

remove method

This node and all descendant nodes contained in this node will be deleted at the same time
Provides an expression that passes a filter that specifies deleting elements in the selected collection

3. detach

If we want to temporarily delete a node on the page, but don't want the data and events on the node to be lost, and we can show the deleted node to the page in the next time period, then we can use detach method to handle detach, which is easy to understand literally. Managed 1 web element. That is, the element is removed from the current page, but the memory model object of this element is preserved.

Official explanation: This method does not remove matching elements from the jQuery object, so you can use these matching elements in the future. And remove() The difference is that all bound events, additional data, etc. will be preserved. $("div").detach() This sentence removes the object, but the display effect is gone. But it still exists in memory. After you append, you are back in the document flow. It shows up again.

Of course, it should be noted here that the detach method is unique to JQuery, so it can only handle events or data bound through the JQuery method

Pass $("p").detach() After deleting all P elements, put the deleted p on the page through append, and you can click on the text test, and the event is not lost


<body>
 <p>P Element 1 Default to binding 1 Click events </p>
 <p>P Element 2 Default to binding 1 Click events </p>
 <button id="bt1"> Click Delete  p  Element </button>
 <button id="bt2"> Click to move  p  Element </button>
 <script type="text/javascript">
 $('p').click(function(e) {
 alert(e.target.innerHTML)
 })
 var p;
 $("#bt1").click(function() {
 if (!$("p").length) return; // Weight removal 
 // Pass detach Method to delete an element 
 // Only the page is not visible, but this node is still saved in memory 
 // Neither data nor events are lost 
 p = $("p").detach()
 });

 $("#bt2").click(function() {
 // Put p Element is added to the page 
 // Events still exist 
 $("body").append(p);
 });
 </script>
</body>

The difference between detach () and remove ()

JQuery is a very strong tool library, in the development of work, but some methods are still because not commonly used, or not noticed by us and ignored. remove() And detach() It could be one of them, it could be remove() We use it more, and detach() It may be very few

Explain the differences between the two methods through a comparison table

方法名	参数	事件及数据是否也被移除	元素自身是否被移除
remove	支持选择器表达	是	是（无参数时），有参数时要根据参数所涉及的范围
detach	参数同remove	否	情况同remove

remove: Remove Node

No parameters, remove the whole node of itself and all nodes inside the node, including events and data on the node
With parameters, remove the filtered node and all nodes inside the node, including events and data on the node

detach: Remove Node

Removal treatment and remove1
And remove() The difference is that all bound events, additional data, and so on are preserved
For example: $("p").detach() This sentence removes the object, but the display effect is gone. But it still exists in memory. After you append, you are back in the document flow. It shows up again.

Summarize

The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or work. If you have any questions, you can leave a message for communication.