www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons jQuery remove() and empty() Methods Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
In the last lessons we saw how we can add new elements to an HTML web page. In this lesson we will see how we can remove elements from an HTML web page.

There are mainly two methods for deleting elements from a web page i.e. remove() and empty(). The remove() method deletes the selected element(s), and the empty() method only deletes all child elements of the selected element(s), including any text that is the part of the selected element, because as per the DOM specification, any text that is part of an element is also considered a child node of the containing element.

Here is an example:

<a href="javascript:void(0);" onclick="$('#parentDiv').remove();"> Remove the Elements</a>
<div id="parentDiv" style="width:200px; height:120px; border:teal solid 3px;">
<div id="childDiv" style="border:dotted 2px yellow; background-color:#33FFFF" > This text is written inside the child Div Element.
</div>
This text is the part of the parent Div Element.
</div>

Clicking on the "Remove the Elements" link, will remove the parentDiv and all of its child elements, in this example there is only one i.e. childDiv.

The above example is re-written below using the empty() method:

<a href="javascript:void(0);" onclick="$('#parentDiv').empty();"> Remove the Child Elements</a>
<div id="parentDiv" style="width:200px; height:120px; border:teal solid 3px;">
<div id="childDiv" style="border:dotted 2px yellow; background-color:#33FFFF" > This text is written inside the child Div Element.
</div>
This text is the part of the parent Div Element.
</div>

Clicking on the "Remove the Child Elements" just removes the childDiv and the text contents of the parentDiv.
Next >>> Lesson No. 21: jQuery Events





Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.