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 timeProvides 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 nodeWith parameters, remove the filtered node and all nodes inside the node, including events and data on the node
detach: Remove Node
Removal treatment and remove1And
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.