• jQuery Video Tutorials

jQuery - Remove Elements


Advertisements

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>

jQuery HTML/CSS Reference

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.

Advertisements