<p>Hello</p> how are <p>you?</p>
how are
$("p").detach();<p class="hello">Hello</p> how are <p>you?</p>
$("p").detach(".hello");how are <p>you?</p>
Web Front-end
JS Tutorial
Analyze the difference between remove() and detach() functions in jquery
Analyze the difference between remove() and detach() functions in jquery
jquery is a very powerful thing that can often be used in work, but some methods are still ignored by us because they are not commonly used or have not been noticed.
Remove() and detach() may be one of them. Maybe we use remove() more often, but detach() may be less used. Maybe I didn't use it carefully enough. I haven't used it once. But this time I used it because of a problem in a project. I found it very interesting, so I recorded it and shared it with everyone.
Remove(): The official explanation is
My understanding is that the element is removed. But how to find it again? To be honest, I have never found any friend who has used it. Can you tell me, thank you very much, Usage: Delete all paragraphs from DOM HTML code: <p>Hello</p> how are <p>you?</p>
Copy after login
jQuery code: <p>Hello</p> how are <p>you?</p>
$("p").remove();Copy after login
Result: $("p").remove(); how are
Copy after loginCopy after login
I won’t go into details about this method. Let’s mainly talk about the detach() method, Official description: Delete from DOM All matching elements. This method does not remove the matching elements from the jQuery object, so the matching elements can be reused in the future. Unlike remove(), all bound events, attached data, etc. will be retained. Description: Remove all paragraphs from DOM HTML code:how are
<p>Hello</p> how are <p>you?</p>
Copy after login
jQuery code:<p>Hello</p> how are <p>you?</p>
$("p").detach();Copy after login
Result: $("p").detach(); how are
Copy after loginCopy after login
Description: Delete the paragraph with hello class from the DOM HTML code: how are
<p class="hello">Hello</p> how are <p>you?</p>
Copy after login
jQuery code: <p class="hello">Hello</p> how are <p>you?</p>
$("p").detach(".hello");Copy after login
Result: $("p").detach(".hello"); how are <p>you?</p>
Copy after login
When we look at it this way, there seems to be no difference. These two functions, haha. . . . Let me tell you now what happened to me. Then everyone will understand how to solve it. I have a form here, one of which is the registration code, that is, each information will have an independent registration code. Without the registration code, the registration cannot be successful. I use jquery's how are <p>you?</p>
controlformValidator for verification. Everyone has used this control. It starts verification when the page is loaded, and for css The display and the hide() method in jquery are ignored. Originally. This is no problem, but the user has put forward a new demand, which is to add an option to determine whether to display the registration code. If it is not displayed, then do not verify the registration code text box. This is a shameless demand.
After trying out css display and jquery hide(), I set my sights on remove(). It stopped verifying, but when I chose to verify, the removed content couldn't be added back, so I started looking for something that could be added back. At this time,detach() was discovered. What's the benefit of it. I will put a code below
var p;
function selectChange() {
if (document.getElementById("ddl_schoolarea").value != "请选择") {
p = $("#trlession").detach();
}
else {
//table1为一个table名字
$("#table1").append(p);
}
}After seeing this code, I don’t think I need to explain too much. Everyone will understand, it’s a very interesting method.
The above is the detailed content of Analyze the difference between remove() and detach() functions in jquery. 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
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.
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.
Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder?
Apr 05, 2025 pm 01:03 PM
The necessity of registering VueRouter in the index.js file under the router folder When developing Vue applications, you often encounter problems with routing configuration. Special...
How to use XPath to search from a specified DOM node in JavaScript?
Apr 04, 2025 pm 11:15 PM
Detailed explanation of XPath search method under DOM nodes In JavaScript, we often need to find specific nodes from the DOM tree based on XPath expressions. If you need to...
Difference between centos and ubuntu
Apr 14, 2025 pm 09:09 PM
The key differences between CentOS and Ubuntu are: origin (CentOS originates from Red Hat, for enterprises; Ubuntu originates from Debian, for individuals), package management (CentOS uses yum, focusing on stability; Ubuntu uses apt, for high update frequency), support cycle (CentOS provides 10 years of support, Ubuntu provides 5 years of LTS support), community support (CentOS focuses on stability, Ubuntu provides a wide range of tutorials and documents), uses (CentOS is biased towards servers, Ubuntu is suitable for servers and desktops), other differences include installation simplicity (CentOS is thin)
What are the different ways of promoting H5 and mini programs?
Apr 06, 2025 am 11:03 AM
There are differences in the promotion methods of H5 and mini programs: platform dependence: H5 depends on the browser, and mini programs rely on specific platforms (such as WeChat). User experience: The H5 experience is poor, and the mini program provides a smooth experience similar to native applications. Communication method: H5 is spread through links, and mini programs are shared or searched through the platform. H5 promotion methods: social sharing, email marketing, QR code, SEO, paid advertising. Mini program promotion methods: platform promotion, social sharing, offline promotion, ASO, cooperation with other platforms.
What is the difference between syntax for adding columns in different database systems
Apr 09, 2025 pm 02:15 PM
不同数据库系统添加列的语法为：MySQL：ALTER TABLE table_name ADD column_name data_type;PostgreSQL：ALTER TABLE table_name ADD COLUMN column_name data_type;Oracle：ALTER TABLE table_name ADD (column_name data_type);SQL Server：ALTER TABLE table_name ADD column_name data_
The difference in output results of console.log: Why do the same variables have different printing methods but different results?
Apr 04, 2025 am 11:48 AM
In-depth discussion of the differences in console.log output in this article will analyze the reasons why the output results of console.log function in a piece of code are different. Code snippets involve URL parameter resolution...
