How to remove an element from DOM using jQuery?

jQueryWeb DevelopmentFront End Technology

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>
raja
Published on 17-Dec-2017 18:36:31
Advertisements