Removing and Inserting DOM elements

Removing the DOM elements

There can be a situation where we may want to remove some of the DOM elements.

For this, there are two methods:

i) empty() method – It removes all the child nodes from the set of matched elements.
ii) remove(expr) method – It removes all the matched elements from DOM.

Syntax:
selector.remove([expr])
or
selector.empty()

Example : Demonstrating the remove() method

<html>
<head>
      <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
      </script>
      <script type="text/javascript" language ="javascript">
      $(document).ready(function()
      {
           $("div").click(function()
           {
                $(this).remove();
           });
      });
      </script>
      <style>
           .div
           {
                margin:20px;
                padding:24px;
                border:4px solid #666;
                width:80px;
           }
           </style>
</head>
<body>
         <p> Click on any of the square </p>
         <div class = "div" style = "background-color:green;"></div>
         <div class = "div" style = "background-color:red;"></div>
         <div class = "div" style = "background-color:orange;"></div>
</body>
</html>


Output:

remove the dom

  • When you click on the green square it disappears and the red and orange square remain.
  • When you click on the red square only the orange square will remain and after the orange square is clicked the screen will only have the sentence 'Click on any of the square'.

Inserting the DOM elements

There can be a situation where you would like to insert one or more DOM elements to an existing document.

The methods for inserting DOM elements are:

i) after(content) method – inserts content after each of the matched elements.
ii) before(content) method – inserts content before each of the matched elements.

Syntax:
selector.after(content)
or
selector.before(content)
Where,
       content is what is to be inserted.

Example : Demonstrating the use of before() method

<html>
<head>
      <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
      </script>
      <script type="text/javascript" language ="javascript">
      $(document).ready(function()
      {
           $("div").click(function()
           {
                $(this).before('<div class="div"></div>');
           });
      });
      </script>
      <style>
           .div
           {
                 margin:20px;
                 padding:24px;
                 border:4px solid #666;
                 width:80px;
           }
      </style>
</head>
<body>
        <p> Click on any of the square </p>
        <div class = "div" style = "background-color:green;"></div>
        <div class = "div" style = "background-color:red;"></div>
        <div class = "div" style = "background-color:orange;"></div>
</body>
</html>


Output:

remove the dom

When we use the before() method we get the following output:

before met 2

When we use the after() method we get the following output:

after met 1
▲