Home > Developer > Web Develop
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>JQuery Learning 6 Deleting an element</title> <!--use jquery Don't forget to refer to jquery files - <Scriptsrc=".. /js/jquery-1.12.2.min.js "></Script></Head><Body><Divclass= "Div">I'm the first DIV element<span>The span element inside the first div</span></Div><Div>I am the second div yo<b>The B element below the second Div</b> <span>The span element below the second Div</span></Div><Divclass= "Div">I'm a third div.</Div><!--the above gives three div test results -<BR/><!--give three button events -<Buttononclick= "shanchu1 ()">Delete Div</Button><Buttononclick= "Shanchu2 ()">Filter Delete div in class= "div"</Button><Buttononclick= "Shanchu3 ()">Delete sub-elements in Div</Button><Script> //SHANCHU1 event, deleting all div elements functionshanchu1 () {$ ("Div"). Remove (); //Remove () Delete method } //shanchu2 event, delete Div, only class= "div" element functionShanchu2 () {$ ("Div"). Remove ('. Div'); //only elements with a class and value equal to Div are removed from the DIV element } //Shanchu3 event, delete all child elements inside div functionShanchu3 () {$ ("Div"). empty (); //Delete all child elements (including content) under the selected element }</Script></Body></HTML>above, we are on the page, open check code, can see, execute SHANCHU1 event, all div is deleted, students notice, here is delete, not hidden, check the code in the Div also disappears, instead of adding display property hidden Oh. Remove () Delete method, it can also take a parameter, is the filter condition, in the div element filter, filter condition is class= "div", so we in the parentheses of remove, with a parameter, the wording and the previous $ ("") is the same, that is to find, the meaning of the specified, Then we call the Shanchu2 event, and we can see that only the first and third Div are removed, because the filtering criteria point to them. The SHANCHU3 event, which uses the empty () method, is also deleted, but does not delete this element, but instead removes all elements underneath this element, including the content. So we check the source will find that three div still exist, but the content, elements, etc. have been deleted. The deletion of this lesson is very simple, the difficulty lies in the expansion, see the students in the actual combat, whether reasonable use.
24th JQuery Learning 6 Deleting an element
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
