Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to remove an HTML element using JavaScript ?

  • Last Updated : 21 Jul, 2021

Given an HTML element and the task is to remove the HTML element from the document using JavaScript.

Approach:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Select the HTML element which need to remove.
  • Use JavaScript remove() and removeChild() method to remove the element from the HTML document.

Example 1: This example uses removeChild() method to remove the HTML element.




<!DOCTYPE HTML> 
<html
    <head
        <title
            How to remove an HTML element
            using JavaScript ?
        </title>
          
        <style>
            #GFG_DIV {
                background: green;
                height: 100px;
                width: 200px;
                margin: 0 auto;
                color: white;
            }
        </style>
    </head
      
    <body style = "text-align:center;"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style =
            "font-size: 19px; font-weight: bold;">
        </p>
          
        <div id = "GFG_DIV">
            This is Div box.
        </div>
        <br>
          
        <button onClick = "GFG_Fun()">
            click here
        </button>
          
        <p id = "GFG_DOWN" style =
            "color: green; font-size: 24px; font-weight: bold;">
        </p>
          
        <!-- Script to remove HTML element -->
        <script>
            var up = document.getElementById('GFG_UP');
            var down = document.getElementById('GFG_DOWN');
            var div = document.getElementById('GFG_DIV');
            up.innerHTML = "Click on button to remove the element.";
              
            function GFG_Fun() {
                div.parentNode.removeChild(div);
                down.innerHTML = "Element is removed."; 
            }
        </script
    </body
</html>                    


Output:



  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example uses remove() method to remove an HTML element from the document.




<!DOCTYPE HTML> 
<html
    <head
        <title
            How to remove an HTML element
            using JavaScript ?
        </title>
          
        <style>
            #GFG_DIV {
                background: green;
                height: 100px;
                width: 200px;
                margin: 0 auto;
                color: white;
            }
        </style>
    </head
      
    <body style = "text-align:center;"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style =
            "font-size: 19px; font-weight: bold;">
        </p>
          
        <div id = "GFG_DIV">
            This is Div box.
        </div>
        <br>
          
        <button onClick = "GFG_Fun()">
            click here
        </button>
          
        <p id = "GFG_DOWN" style =
            "color: green; font-size: 24px; font-weight: bold;">
        </p>
          
        <!-- Script to remove HTML element -->
        <script>
            var up = document.getElementById('GFG_UP');
            var down = document.getElementById('GFG_DOWN');
            var div = document.getElementById('GFG_DIV');
            up.innerHTML = "Click on button to remove the element.";
              
            function GFG_Fun() {
                div.remove();
                down.innerHTML = "Element is removed."; 
            }
        </script
    </body
</html>                    


Output:

  • Before clicking on the button:
  • After clicking on the button:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!