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

$(selector).remove();
$(selector).empty();




Observe the change by clicking on buttons







HTML code:

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


CSS stylesheet

<style>
#example
{
background-color:#585858;
color:#fff;
font-size:20px;
height:100px;
text-align:center;
}
</style>


Javascript

<script>
$(document).ready(function()
{
$('#butn1').click(function()
{
$('#example').remove();
});
		
$('#butn2').click(function()
{
$('#example').empty();
});	
});
</script>


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