How to remove an HTML element using JavaScript ?

21 Jul, 2021
Given an HTML element and the task is to remove the HTML element from the document using JavaScript.
Approach:
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.
HTML-DOM
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.