Home > Developer > Web Develop
There are three ways to delete nodes in jquery: Remove (), detach (), empty (), and this article analyzes these three methods in detail.
The easiest to distinguish is empty (), which strictly belongs to the "emptying node", that is, deleting its child nodes, and does not delete itself . Give me a chestnut:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Remove and detach contrast</title>6 <Scriptsrc= "Http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></Script>7 <Scripttype= "Text/javascript">8 $(function(){9 $(". Apple"). Click (function() {alert ('I'm an apple .');});Ten var$apple= $(". Apple"); One A //empty () - $(". Delete"). Click (function(){ - $apple. Empty (); the }); - $(". Add"). Click (function(){ - $apple. Text ("Apple"); - }); + - + }); A at </Script> - </Head> - <Body> - <Div> - <ul> - <Li>Banana</Li> in <Li>Strawberry</Li> - <Li>Orange</Li> to <Listyle= "color:red;"class= "Apple">Apple</Li> + </ul> - <Buttonclass= "Delete">Click Delete</Button> the <Buttonclass= "Add">Click Add</Button> * </Div> $ </Body>Panax Notoginseng </HTML>
Before deletion:
After deletion:
The empty () method is easy to understand. The following is a key analysis of the Remove () and Detach () methods:
Remove () : Deletes all descendant nodes and themselves, and also unbind the event that the node is bound to. also use the above chestnut, JS code is as follows:
1 when the//remove--node is deleted, the bound event is also dismissed. 2 $ (". Delete"). Click (function () {3 $apple. Remove (); 4 }); 5 $ (". Add"). Click (function () {6 $apple. AppendTo ("ul"); 7 });Before deleting, click "Apple", will jump out the prompt message:
After deletion:
Click Add, you can get the same effect as before, but click "Apple" will not appear in the box, indicating that the original binding click () event is dismissed.
Detach (): Deletes all descendant nodes and themselves, but remains after the event that the node is bound to is deleted. JS Code:
1 After the//detach--node is deleted, the bound event persists and can continue to be used. 2 $ (". Delete"). Click (function () {3 $apple. Detach (); 4 }); 5 6 $ (". Add"). Click (function () {7 $apple. AppendTo ("ul"); 8 });After deletion, add the node again, click "Apple" will retain the pre-deletion of the binding information, that is, pop-up message.
Complete the full text, welcome all friends to criticize correct!
Delete Node method in jquery Remove (), detach (), empty () analysis
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
