jQuery provides remove() and empty() methods to remove existing HTML elements from an HTML document.
jQuery remove() Method
The jQuery remove() method removes the selected element(s) and it’s child elements from the document.
Following is the syntax of the remove() method:
$(selector).remove();
You should use remove() method when you want to remove the element itself, as well as everything inside it.
Synopsis
Consider the following HTML content:
<div class="container"> <h2>jQuery remove() Method</h2> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
Now if we apply the remove() method as follows:
$( ".hello" ).remove();
It will produce following result:
<div class="container"> <h2>jQuery remove() Method</h2> <div class="goodbye">Goodbye</div> </div>
If we had any number of nested elements inside <div class=”hello”>, they would be removed, too.
Example
Let’s try the following example and verify the result:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$( ".hello" ).remove();
});
});
</script>
</head>
<body>
<div class="container">
<h2>jQuery remove() Method</h2>
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
<br>
<button>Remove Text</button>
</body>
</html>
Remove with Filter
We can also include a selector as an optional parameter for the remove() method. For example, we could rewrite the previous DOM removal code as follows:
Let’s try the following example and verify the result:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").remove(".hello");
});
});
</script>
</head>
<body>
<div class="container">
<h2>jQuery remove(selector) Method</h2>
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
<br>
<button>Remove Text</button>
</body>
</html>
jQuery empty() Method
The jQuery empty() method is very similar to remove() which removes the selected element(s) and it’s child elements from the document. This method does not accept any arguments.
Following is the syntax of the empty() method:
$(selector).empty();
You should use empty() method when you want to remove the element itself, as well as everything inside it.
Synopsis
Consider the following HTML content:
<div class="container"> <h2>jQuery empty() Method</h2> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
Now if we apply the empty() method as follows:
$( ".hello" ).empty();
It will produce following result:
<div class="container"> <h2>jQuery empty() Method</h2> <div class="goodbye">Goodbye</div> </div>
Example
Let’s try the following example and verify the result:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$( ".hello" ).empty();
});
});
</script>
</head>
<body>
<div class="container">
<h2>jQuery empty() Method</h2>
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
<br>
<button>Remove Text</button>
</body>
</html>