How to remove an element from DOM using jQuery?


The empty() method removes all child nodes from the set of matched elements whereas the method remove() method removes all matched elements from the DOM.

To remove an element, use the remove() method.

Example

You can try to run the following code to learn how to remove an element from DOM using jQuery:

Live Demo

<html>
   <head>
      <title>jQuery remove() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>
       
      <style>
         .div {
             margin:10px;
             padding:12px;
             border:2px solid #666;
             width:60px;
         }
      </style>
   </head>
   
   <body>
   
      <p>Click on any square below:</p>
      <span id = "result"> </span>
       
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
       
   </body>
</html>

Updated on: 17-Dec-2019

714 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements