How To Remove Div In Jquery

by

Removing a DIV or any other element from a web page is quite simple using jQuery. In this blog post, we will discuss how to remove a DIV from a web page using jQuery’s .remove() method.

Prerequisites

Before we dive into the details of how to remove a DIV with jQuery, make sure you have the following prerequisites in place:

  • Basic knowledge of HTML and CSS.
  • Basic understanding of jQuery library and its usage.
  • Make sure you have added the jQuery library to your project. You can use the following CDN for this purpose: 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Using .remove() method to remove a DIV

The .remove() method in jQuery is used to remove the selected element(s) from the DOM. In our case, we will use it to remove a specific DIV.

Consider the following HTML code:

<div id="container">
  <div id="box1" class="box">Box 1</div>
  <div id="box2" class="box">Box 2</div>
  <div id="box3" class="box">Box 3</div>
</div>

We have a parent DIV with an ID of container and three child DIVs with IDs box1, box2, and box3.

To remove the DIV with the ID box1, you can use the following jQuery code:

$("#box1").remove();

This will remove the entire DIV with the ID box1 from the DOM.

Removing all child DIVs with a specific class

If you want to remove all child DIVs with a specific class, you can use the following jQuery code:

$(".box").remove();

This will remove all child DIVs with the class box from the DOM.

Conclusion

In this blog post, we have learned how to remove a DIV from a web page using jQuery’s .remove() method. This method is very useful when you need to manipulate the DOM and remove specific elements. Remember that when using this method, the entire element, including its content and child elements, will be removed from the DOM. If you want to remove only the content of an element and keep the element itself, you can use the .empty() method instead.