Home > Developer > Web Develop
JQuery: Deleting elements
With JQuery, it's easy to delete existing HTML elements and delete elements/content.
To delete elements and content, you can typically use the following two JQuery methods:
Remove ()-Deletes the selected element (and its child elements)
Empty ()-Removes child elements from the selected element
1. JQuery Remove () method
The JQuery Remove () method deletes the selected element and its child elements.
Instance: $ ("#div1"). Remove ();
The code is as follows:
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head> <MetaCharSet= "Utf-8"> <title>The use of jquery!!!</title> <Scriptsrc= "Jquery-3.1.0.js"></Script> <Script>$ (document). Ready (function(){ //Delete div element $("Button"). Click (function(){ $("#div"). Remove (); }); }); </Script></Head><Body> <DivID= "Div"style= "width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center">Here are some of the text in the Div<P>This is a line of the div in the paragraph</P> <P>This is another line in the Div.</P> </Div><BR> <Button>Delete div element</Button></Body></HTML>
2. JQuery empty () method
The JQuery Empty () method deletes the child elements of the selected element.
Instance: $ ("#div1"). empty ();
The code is as follows:
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head> <MetaCharSet= "Utf-8"> <title>The use of jquery!!!</title> <Scriptsrc= "Jquery-3.1.0.js"></Script> <Script>$ (document). Ready (function(){ //Empty div Elements $("Button"). Click (function(){ $("#div"). empty (); }); }); </Script></Head><Body> <DivID= "Div"style= "width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center">Here are some of the text in the Div<P>This is a line of the div in the paragraph</P> <P>This is another line in the Div.</P> </Div><BR> <Button>Empty DIV elements</Button></Body></HTML>
3. Filter deleted elements
The JQuery Remove () method can also accept a parameter that allows you to filter the deleted element.
This parameter can be the syntax of any jQuery selector.
The following example removes all <p> elements of the class= "italic":
Instance: $ ("P"). Remove (". Italic");
The code is as follows:
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head> <MetaCharSet= "Utf-8"> <title>The use of jquery!!!</title> <Scriptsrc= "Jquery-3.1.0.js"></Script> <Script>$ (document). Ready (function(){ //Remove all P elements of class= "italic" $("Button"). Click (function(){ $("P"). Remove (". Italic"); }); }); </Script></Head><Body> <DivID= "Div"style= "width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center">Here are some of the text in the Div<Pclass= "Italic">This is a line of the div in the paragraph</P> <Pclass= "Italic">This is another line in the Div.</P> </Div><BR> <Button>Remove all P elements of class= "italic"</Button></Body></HTML>
Jquery:jquery deleting elements
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
