jQuery remove()

jQuery remove() method is used to remove existing HTML elements from DOM.

To remove existing HTML elements using jQuery,

  1. Select HTML elements to be removed using jQuery selectors.
  2. Call remove() method on the selected HTML elements to remove them from DOM.

In this tutorial, you will learn about jQuery remove() method, its syntax and usage, with examples.

Syntax – jQuery remove()

To remove the HTML element permanently from DOM using jQuery, use remove() method on the selection. Following is the syntax of jQuery remove() method :

</>
Copy
$("htmlElement").remove();

Examples – jQuery remove()

The following examples help you understand the usage of jQuery remove() method.

1. Example – Remove HTML elements based on class

In the following example, on clicking a button, using jQuery remove() method, we remove HTML elements whose class is abc.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#btnAct").click(function(){
  $(".abc").remove();
 });
});
</script>
</head>
<body>

 <h2>Heading 2</h2>
 
 <p class="abc">A paragraph.</p>
 <p>Another paragraph.</p>

 Some List
 <ul>
  <li class="abc">Item 1</li>
  <li>Item 2</li>
 </ul>

 <button id="btnAct">Remove elements with abc class</button>

</body>
</html>

2. Example – Remove div elements based on ID

Following example demonstrates how to remove selected DIV elements based on id.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#btnAct").click(function(){
  $("div#desc").remove();
 });
});
</script>
</head>
<body>

 <h2>Heading 2</h2>
 
 <div id="desc" style="background:#DDD;border:1px solid #CCC;padding:20px;margin:10px;">
 <p class="abc">A paragraph.</p>
 <p>Another paragraph.</p>
 </div>

 Some List
 <ul>
 <li class="abc">Item 1</li>
 <li>Item 2</li>
 </ul>

 <button id="btnAct">Remove div with id=desc</button>

</body>
</html>

Conclusion

In this jQuery Tutorial, we have learnt jQuery remove() method : Syntax and Usage with examples.