Objectives and outcomes

In this tutorial we are going to learn about jquery remove content methods. There are two methods to remove content :-
1- remove() - It is used to remove selected element as well as its child elements.
2- empty() - It is used to remove child elements of the selected element.
Example for the same is shown below:

Syntax for method


Observe the change by clicking on buttons

HTML code:

<meta charset="utf-8">
<title>Jquery removing content</title>
<script src="jquery/jquery.min.js"></script>
<div id="example">
<p id="para">Observe the change by clicking on buttons<br/></p><br/>
<button id="butn1">Remove</button><br/>
<button id="butn2">Empty</button>

CSS stylesheet




Applying filters with remove() and empty()

1- $("div").remove(".class1");
2- $("div").empty(".class1");

First line dictates that to remove all the div having class="class1" while the second line indicates to empty all the div with class1