jQuery Remove
Using the jQuery, it is easy to remove the existing HTML content.
There are two jQuery methods to remove the content:
Selector: It is used to specify whether to remove one or more elements. You can use comma (,) to separate more than one element. It is an optional parameter.
Try Now
Try Now
remove() empty()
jQuery remove() Method
The jQuery remove() method is used to remove the selected element(s) and its child elements. It also removes the data and the events of the selected elements. Syntax:$(selector).remove(selector)
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:150px;width:300px;border:1px solid black;">
<h3>This is the div heading.</h3>
<p>This is second div paragraph.</p>
This is the div text.
</div>
<br>
<button>Remove div content</button>
</body>
</html>
jQuery empty() Method
The jQuery empty() method is used to remove the child elements of the selected element(s). It doesn't remove the element itself. Syntax:$(selector).empty()
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:150px;width:300px;border:1px solid black;background-color:orange;">
<h3>This is a div heading.</h3>
<p>This is another paragraph in the div.</p>
This is some text in the div.
</div>
<br>
<button>Empty the div element</button>
</body>
</html>