How to remove an HTML element using JavaScript ?

Last Updated : 09 Jan, 2025

Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions or events.

These are the following ways to solve this problem:

Table of Content

Using removeChild() Method

The removeChild() method removes a specified child element from its parent in the DOM. To use it, first select the parent element, then call removeChild() on the parent, passing the child element as an argument. This effectively deletes the child from the document.

Example: This example includes a button that removes a div element with id=”GFG_DIV” from the page. After removal, a message is displayed indicating the element has been removed.

html

<!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>         let up = document.getElementById('GFG_UP');         let down = document.getElementById('GFG_DOWN');         let 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:

Remove an HTML element

Using remove() Method

The remove() method directly removes an HTML element from the DOM. To use it, simply select the element you want to remove and call element.remove(). This approach is straightforward, requires no parent reference, and instantly deletes the element from the document.

Example: This example we includes a button that, when clicked, uses JavaScript to remove a div element (GFG_DIV). After removal, it updates a paragraph with a confirmation message.

html

<!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>         let up = document.getElementById('GFG_UP');         let down = document.getElementById('GFG_DOWN');         let 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:

Remove an HTML element

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.

How to Hide an HTML Element by Class using JavaScript?

PranchalKatiyar

Improve

Article Tags :

How to remove an HTML element using JavaScript ?

Using removeChild() Method

Using remove() Method

Similar Reads