jQuery provides two methods to remove HTML elements and content:
- remove()
- empty()
The jQuery remove() method removes the selected elements and their child elements from the DOM. Removal of more than one element is also possible with the jQuery remove() method. All the elements should be separated with a comma (,) for the removal of multiple elements.
Syntax:
$(selector).remove()
Example1:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:100px;border:5 px solid black;background-color:yellow;">
</div>
<br>
<button>Remove</button>
</body>
</html>
Example2:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p, #div1").remove();
});
});
</script>
</head>
<body>
<p> Hello! </p>
<br>
<div id="div1" style="height:100px;width:100px;border:5px solid black;background-color:yellow;">
</div>
<button>Remove</button>
</body>
</html>