Web Front-end
JS Tutorial
Detailed example of the difference between empty and remove based on DOM
Detailed example of the difference between empty and remove based on DOM
This article mainly brings you an article on the difference between empty and remove based on DOM node deletion (detailed explanation). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
Removing nodes on the page is a common operation for developers. jQuery provides several different methods to deal with this problem. Here we take a closer look at the empty and remove methods
empty As the name suggests, the clear method is a little different from deletion because it only removes all child nodes in the specified element.
This method not only removes child elements (and other descendant elements), but also removes the text within the element. Because, according to the description, any text string in an element is regarded as a child node of the element. Please look at the following HTML:
<p class="hello"><p>这是p标签</p></p>
If we remove all elements inside p via empty method, it just clears the inner html code, but the markup still remains in the DOM
//通过empty处理
$('.hello').empty()
//结果：<p>这是p标签</p>被移除
<p class="hello"></p>via empty All p elements under the current p element have been removed, but the p element with id=test has not been deleted.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
p {
background: #bbffaa;
width: 300px;
}
</style>
</head>
<body>
<h2>通过empty移除元素</h2>
<p id="test">
<p>p元素1</p>
<p>p元素2</p>
</p>
<button>点击通过jQuery的empty移除元素</button>
<script type="text/javascript">
$("button").on('click', function() {
//通过empty移除了当前p元素下的所有p元素
//但是本身id=test的p元素没有被删除
$("#test").empty()
})
</script>
</body>
</html>remove is the same as empty. It is a method of removing elements, but remove will move the element itself. Removes everything inside the element, including bound events and jQuery data associated with the element.
For example, for a node, bind a click event
<p class="hello"><p>这是P段落</p></p>
$('.hello').on("click",fn)It is actually very simple to delete this node without using the remove method, but at the same time, the event needs to be destroyed. This is to prevent "memory leaks" ", so front-end developers must pay attention to how many events are tied and remember to destroy them when not in use
Remove p and all its internal elements through the remove method. The event destruction method will be automatically operated inside remove, so It is very simple to use
//通过remove处理
$('.hello').remove()
//结果：<p class="hello"><p>这是P段落</p></p> 全部被移除 //节点不存在了,同事事件也会被销毁remove expression parameters:
The advantage of remove than empty is that you can pass a selector expression to filter the set of matching elements that will be removed. You can selectively delete specified nodes
We can select a group of the same elements through $(), and then pass the filtering rules through remove(), so as to handle this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.test1 {
background: #bbffaa;
}
.test2 {
background: yellow;
}
</style>
</head>
<body>
<h2>通过jQuery remove方法移除元素</h2>
<p class="test1">
<p>p元素1</p>
<p>p元素2</p>
</p>
<p class="test2">
<p>p元素3</p>
<p>p元素4</p>
</p>
<button>通过点击jQuery的empty移除元素</button>
<button>通过点击jQuery的empty移除指定元素</button>
<script type="text/javascript">
$("button:first").on('click', function() {
//删除整个 class=test1的p节点
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中，包含了3的元素
//这个也是一个过滤器的处理
$("p").remove(":contains('3')")
})
</script>
</body>
</html>To be used When removing specified elements, jQuery provides two methods, empty() and remove([expr]). Both of them delete elements, but there are still differences between them:
To use remove specification When it comes to elements, jQuery provides two methods: empty() and remove([expr]). Both of them delete elements, but there are still differences between them.
empty method
Strictly In other words, the empty() method does not delete the node, but clears the node. It can clear all descendant nodes in the element.
empty cannot delete its own node
remove method
This node and all descendant nodes contained in this node will be deleted at the same time
Provides a filtering expression to be passed to delete elements in the specified collection
The above is the difference between the two. We will deepen our understanding through the code part below
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.left,
.right {
width: 300px;
}
.left p,
.right p {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left p {
background: #bbffaa;
}
.right p {
background: yellow;
}
</style>
</head>
<body>
<h2>通过empty与remove移除元素</h2>
<p class="left">
<button id="bt1">点击通过jQuery的empty移除内部P元素</button>
<button id="bt2">点击通过jQuery的remove移除整个节点</button>
</p>
<p class="right">
<p id="test1">
<p>p元素1</p>
<p>p元素2</p>
</p>
<p id="test2">
<p>p元素3</p>
<p>p元素4</p>
</p>
</p>
<script type="text/javascript">
$("#bt1").on('click', function() {
//删除了2个p元素，但是本着没有删除
$("#test1").empty()
})
$("#bt2").on('click', function() {
//删除整个节点
$("#test2").remove()
})
</script>
</body>
</html>Related recommendations:
Introduction to the functions is_null, isset, and empty in php
Questions about empty-cells in css
Detailed analysis of the empty-cells attribute in css table
The above is the detailed content of Detailed example of the difference between empty and remove based on DOM. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
PHP determines whether a specified key exists in an array
Mar 21, 2024 pm 09:21 PM
This article will explain in detail how PHP determines whether a specified key exists in an array. The editor thinks it is very practical, so I share it with you as a reference. I hope you can gain something after reading this article. PHP determines whether a specified key exists in an array: In PHP, there are many ways to determine whether a specified key exists in an array: 1. Use the isset() function: isset($array["key"]) This function returns a Boolean value, true if the specified key exists, false otherwise. 2. Use array_key_exists() function: array_key_exists("key",$arr
remove means
Aug 04, 2023 am 11:29 AM
Remove means to delete an element, node or character from a data structure. The specific implementation depends on the programming language and data structure used. Whether it is an array, a linked list, or a string, the remove operation is one of the operations often used by programmers and is very important for data processing and algorithm implementation.
Remove a specified part of a string using the StringBuilder.Remove function in C#
Nov 18, 2023 pm 01:28 PM
Use the StringBuilder.Remove function in C# to delete the specified part of the string. In C#, the StringBuilder class is a mutable string type that allows us to modify and operate strings. The Remove function of StringBuilder provides a convenient way to delete the specified part of the string. The usage of StringBuilder.Remove function is as follows: publicStringBuilde
Use java's ArrayList.remove() function to remove the element at the specified index position
Jul 27, 2023 pm 12:51 PM
Use Java's ArrayList.remove() function to remove the element at the specified index position. In the Java collection framework, ArrayList is a dynamic array that provides many convenient methods to operate and manage elements. Among them, remove() is one of the most commonly used functions of the ArrayList class. The remove() function can remove elements from the ArrayList based on the index position. Let's take a look at using ArrayList.remov
PHP function introduction—empty(): Check whether the variable is empty
Jul 25, 2023 am 10:23 AM
PHP function introduction—empty(): Check whether a variable is empty. In PHP programming, it is often necessary to judge a variable. It is a common requirement to judge whether a variable is empty. PHP's built-in empty() function is used to check whether the variable is empty. This article will introduce the usage of the empty() function and provide some practical code examples. The usage of the empty() function is very simple, it accepts one parameter and returns a Boolean value. When the value of the parameter is one of the following situations, the empty() function
Anomaly detection problem based on time series
Oct 09, 2023 pm 04:33 PM
The problem of anomaly detection based on time series requires specific code examples. Time series data is data recorded in a certain order over time, such as stock prices, temperature changes, traffic flow, etc. In practical applications, anomaly detection of time series data is of great significance. An outlier can be an extreme value that is inconsistent with normal data, noise, erroneous data, or an unexpected event in a specific situation. Anomaly detection can help us discover these anomalies and take appropriate measures. For time series anomaly detection problems, commonly used
How to use vector's delete function in C
Feb 18, 2024 am 11:29 AM
The remove usage of vector in C requires specific code examples: vector in C language is a dynamic array whose size can be adjusted at runtime. It is a very commonly used data structure used to store and manipulate multiple objects. In practical applications, we often need to insert new elements into vectors or delete existing elements. This article will introduce in detail the use of vector remove in C language and give corresponding code examples. vector’s remove function prototype: v
Java uses the remove() function of the ArrayList class to delete elements from the collection
Jul 24, 2023 pm 09:17 PM
Java uses the remove() function of the ArrayList class to delete elements in the collection. ArrayList is one of the commonly used collection classes in Java. It provides an implementation of a dynamic array. ArrayList can store different types of elements and can be added and deleted at any time as needed. In ArrayList, we often need to delete specific elements in the collection. Java provides the remove() function to implement this function. Next, we will introduce in detail such as
