The difference between empty and remove in DOM node deletion
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, empty method, but it is a little different from delete, 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 of p inside 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>
通过empty移除了当前p元素下的所有p元素，但是本身id=test的p元素没有被删除
<!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, both are ways to remove elements, but remove will remove the element itself, and also Everything inside the element will be removed, including bound events and jQuery data related to 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. Removed, this is to prevent "memory leaks", so front-end developers must pay attention to how many events are tied, and remember to destroy it when not in use
Remove p and all its internal elements through the remove method, remove The event destruction method will be automatically operated internally, so it is very simple to use
//通过remove处理 $('.hello').remove() //结果：<p class="hello"><p>这是P段落</p></p> 全部被移除 //节点不存在了,同事事件也会被销毁
remove expression parameters:
remove is easier to use than empty. Pass a selector expression to filter the set of matching elements that will be removed. You can selectively delete the specified node
We can select a group of the same elements through $(), and then use remove() Pass the filtering rules to process
<!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>When you want to remove the specified element, jQuery provides two methods: empty() and remove([expr]) , both delete elements, but there are still differences between the two:
When it is necessary to remove the specified element, jQuery provides two methods, empty() and remove([expr]), two Both delete elements, but there are still differences between the two
empty method
Strictly speaking, the empty() method does not delete the node, but clears the node. 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. Let’s deepen our understanding through the code part on the right.
<!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>The above is the detailed content of The difference between empty and remove in DOM node deletion. 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
AI Hentai Generator
Generate AI Hentai for free.
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
1384
52
The difference between char and wchar_t in C language
Apr 03, 2025 pm 03:09 PM
In C language, the main difference between char and wchar_t is character encoding: char uses ASCII or extends ASCII, wchar_t uses Unicode; char takes up 1-2 bytes, wchar_t takes up 2-4 bytes; char is suitable for English text, wchar_t is suitable for multilingual text; char is widely supported, wchar_t depends on whether the compiler and operating system support Unicode; char is limited in character range, wchar_t has a larger character range, and special functions are used for arithmetic operations.
The difference between multithreading and asynchronous c#
Apr 03, 2025 pm 02:57 PM
The difference between multithreading and asynchronous is that multithreading executes multiple threads at the same time, while asynchronously performs operations without blocking the current thread. Multithreading is used for compute-intensive tasks, while asynchronously is used for user interaction. The advantage of multi-threading is to improve computing performance, while the advantage of asynchronous is to not block UI threads. Choosing multithreading or asynchronous depends on the nature of the task: Computation-intensive tasks use multithreading, tasks that interact with external resources and need to keep UI responsiveness use asynchronous.
What is the function of C language sum?
Apr 03, 2025 pm 02:21 PM
There is no built-in sum function in C language, so it needs to be written by yourself. Sum can be achieved by traversing the array and accumulating elements: Loop version: Sum is calculated using for loop and array length. Pointer version: Use pointers to point to array elements, and efficient summing is achieved through self-increment pointers. Dynamically allocate array version: Dynamically allocate arrays and manage memory yourself, ensuring that allocated memory is freed to prevent memory leaks.
What is the difference between char and unsigned char
Apr 03, 2025 pm 03:36 PM
char and unsigned char are two data types that store character data. The main difference is the way to deal with negative and positive numbers: value range: char signed (-128 to 127), and unsigned char unsigned (0 to 255). Negative number processing: char can store negative numbers, unsigned char cannot. Bit mode: char The highest bit represents the symbol, unsigned char Unsigned bit. Arithmetic operations: char and unsigned char are signed and unsigned types, and their arithmetic operations are different. Compatibility: char and unsigned char
What are the basic requirements for c language functions
Apr 03, 2025 pm 10:06 PM
C language functions are the basis for code modularization and program building. They consist of declarations (function headers) and definitions (function bodies). C language uses values to pass parameters by default, but external variables can also be modified using address pass. Functions can have or have no return value, and the return value type must be consistent with the declaration. Function naming should be clear and easy to understand, using camel or underscore nomenclature. Follow the single responsibility principle and keep the function simplicity to improve maintainability and readability.
The difference between H5 and mini-programs and APPs
Apr 06, 2025 am 10:42 AM
H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.
c What are the differences between the three implementation methods of multithreading
Apr 03, 2025 pm 03:03 PM
Multithreading is an important technology in computer programming and is used to improve program execution efficiency. In the C language, there are many ways to implement multithreading, including thread libraries, POSIX threads, and Windows API.
How to set password protection for export PDF on PS
Apr 06, 2025 pm 04:45 PM
Export password-protected PDF in Photoshop: Open the image file. Click "File"> "Export"> "Export as PDF". Set the "Security" option and enter the same password twice. Click "Export" to generate a PDF file.
