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
deepseek What is the difference between r1 and v3 version
Feb 19, 2025 pm 03:24 PM
DeepSeek: In-depth comparison between R1 and V3 versions helps you choose the best AI assistant! DeepSeek already has tens of millions of users, and its AI dialogue function has been well received. But are you confused when facing the R1 and V3 versions? This article will explain the differences between the two in detail to help you choose the most suitable version. The core difference between DeepSeekR1 and V3 version: Features The design goal of the V3 version focuses on complex problem reasoning, deep logic analysis, multi-functional large language model, focusing on scalability and efficiency architecture and parameter reinforcement learning optimization architecture, parameter scale 1.5 billion to 70 billion MoE hybrid Expert architecture, total parameters are as high as 671 billion, each token is activated by 37 billion
Summary of FAQs for DeepSeek usage
Feb 19, 2025 pm 03:45 PM
DeepSeekAI Tool User Guide and FAQ DeepSeek is a powerful AI intelligent tool. This article will answer some common usage questions to help you get started quickly. FAQ: The difference between different access methods: There is no difference in function between web version, App version and API calls, and App is just a wrapper for web version. The local deployment uses a distillation model, which is slightly inferior to the full version of DeepSeek-R1, but the 32-bit model theoretically has 90% full version capability. What is a tavern? SillyTavern is a front-end interface that requires calling the AI model through API or Ollama. What is breaking limit
Does Bitcoin have stocks? Does Bitcoin have equity?
Mar 03, 2025 pm 06:42 PM
The cryptocurrency market is booming, and Bitcoin, as a leader, has attracted the attention of many investors. Many people are curious: Do Bitcoin have stocks? The answer is no. Bitcoin itself is not a stock, but investors can indirectly invest in Bitcoin-related assets through various channels, which will be explained in detail in this article. Alternatives to Bitcoin Investment: Instead of investing directly in Bitcoin, investors can participate in the Bitcoin market by: Bitcoin ETF: This is a fund traded on the stock trading market, whose asset portfolio contains Bitcoin or Bitcoin futures contracts. This is a relatively convenient option for investors who are accustomed to stock investments, without having to hold Bitcoin directly. Bitcoin Mining Company Stocks: These companies' business is Bitcoin mining and holding Bitcoin
What is the difference between pre-market and after-market trading? Detailed explanation of the differences between pre-market and after-market trading
Mar 03, 2025 pm 11:54 PM
In traditional financial markets, pre-market and after-market trading refers to trading activities outside the regular trading period. Although the cryptocurrency market is trading around the clock, trading platforms like Bitget also offer similar features, especially some comprehensive platforms that trade stocks and cryptocurrencies at the same time. This article will clarify the differences in pre-market and after-market trading and explore its impact on currency price. Four major differences between pre-market and after-market trading: The main differences between pre-market and after-market trading and regular trading periods are in four aspects: trading time, liquidity, price fluctuations and trading volume: Trading time: Pre-market trading occurs before the official trading starts, and after-market trading is carried out after the regular trading ends. Liquidity: The liquidity of pre- and after-hours trading is low, there are few traders, and the bid and offer price difference is large; while the liquidity is high during the regular trading period, the price is
Why is Bittensor said to be the 'bitcoin' in the AI track?
Mar 04, 2025 pm 04:06 PM
Original title: Bittensor=AIBitcoin? Original author: S4mmyEth, Decentralized AI Research Original translation: zhouzhou, BlockBeats Editor's note: This article discusses Bittensor, a decentralized AI platform, hoping to break the monopoly of centralized AI companies through blockchain technology and promote an open and collaborative AI ecosystem. Bittensor adopts a subnet model that allows the emergence of different AI solutions and inspires innovation through TAO tokens. Although the AI market is mature, Bittensor faces competitive risks and may be subject to other open source
Is there any difference between South Korean Bitcoin and domestic Bitcoin?
Mar 05, 2025 pm 06:51 PM
The Bitcoin investment boom continues to heat up. As the world's first decentralized digital asset, Bitcoin has attracted much attention on its decentralization and global liquidity. Although China was once the largest market for Bitcoin, policy impacts have led to transaction restrictions. Today, South Korea has become one of the major Bitcoin markets in the world, causing investors to question the differences between it and its domestic Bitcoin. This article will conduct in-depth analysis of the differences between the Bitcoin markets of the two countries. Analysis of the differences between South Korea and China Bitcoin markets. The main differences between South Korea and China’s Bitcoin markets are reflected in prices, market supply and demand, exchange rates, regulatory supervision, market liquidity and trading platforms. Price difference: South Korea’s Bitcoin price is usually higher than China, and this phenomenon is called “Kimchi Premium.” For example, in late October 2024, the price of Bitcoin in South Korea was once
Vertical proxy: Application scenarios and interpretation of disruptive potential of encryption native proxy
Mar 04, 2025 am 10:21 AM
Artificial intelligence agents (AIAgents) are rapidly integrating into daily operations of enterprises, from large companies to small businesses, almost all areas have begun to be used, including sales, marketing, finance, law, IT, project management, logistics, customer service and workflow automation. We are moving from an era of manual processing of data, performing repetitive tasks, and using Excel tables to an era of autonomous operation by AI agents around the clock, which not only improves efficiency but also significantly reduces costs. Application case of AI agents in Web2: YCombinator's Perspective Apten: A sales and marketing optimization tool combining AI and SMS technology. BildAI: A model that can read architectural blueprints,
Pepe bought and sold out in a big way, is MUTM a smarter investment in 2025?
Mar 03, 2025 pm 07:09 PM
After the surge in PEPE, can MUTM become a more stable investment choice in 2025? PEPE (PEPE) has made early investors profitable, but its violent price fluctuations have also made many people question its long-term prospects. As the meme currency market continues to turbulently, traders are beginning to focus on projects with more fundamental advantages, and MutuumFinance (MUTM) is one of them. This is a decentralized lending platform focusing on practical financial applications. Unlike PEPE, which relies on speculative speculation, MUTM builds a structured DeFi ecosystem where users can borrow and earn passive income. Its pre-sale has exceeded one million US dollars, the first phase of token sales rate exceeds 97%, early investment
