How to remove an HTML element using JavaScript ? Last Updated : 09 Jan, 2025 Comments Improve Suggest changes Like Article Like Report 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 ContentUsing removeChild() MethodUsing remove() MethodUsing removeChild() MethodThe 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 elementUsing remove() MethodThe 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 elementJavaScript 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. Comment More infoAdvertise with us Next Article How to remove an HTML element using JavaScript ? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies HTML-DOM JavaScript-Questions Similar Reads How to remove specific div element by using JavaScript? Removing a specific `<div>` element with JavaScript is crucial for dynamic web content management. Whether updating information, responding to user actions, or optimizing performance by cleaning the DOM, efficient DOM manipulation is essential. JavaScript offers diverse methods such as `remove 3 min read How to remove HTML tags from a string using JavaScript ? Removing HTML tags from a string in JavaScript means stripping out the markup elements, leaving only the plain text content. This is typically done to sanitize user input or to extract readable text from HTML code, ensuring no unwanted tags remain in the string.HTML tags come in two forms: opening t 3 min read How to remove a Class name from an Element using JavaScript ? Removing a class name from an HTML element using JavaScript is often used to dynamically modify the styling or behavior of an element based on user interactions, events, or other conditions. The operation can be achieved using classList property, that allows you to add, remove, or toggle classes. Sy 3 min read How to replace an HTML element with another one using JavaScript? Replacing an HTML element with another using JavaScript allows for dynamic modification of webpage content without reloading the entire page. Document Object Model (DOM) is a platform and language-neutral interface that is used by programs and scripts to dynamically access the content, style, and st 2 min read How to remove an added list items using JavaScript ? In the following article, we dynamically add and remove list items using JavaScript. We are using JavaScript to add and/or remove list items dynamically which means that if we run our webpage it will show the option of adding and removing items using buttons. Approach: In the webpage, one input text 2 min read How to remove âdisabledâ attribute from HTML input element using JavaScript ? In HTML, we use input elements for user input. The 'disabled' property helps prevent interaction with these elements. For example, if we only want users over 18 to input their Adhar card numbers, we can use JavaScript to remove the 'disabled' attribute when the user enters an age greater than 18. Th 2 min read Remove & Add new HTML Tags using JavaScript In web development, dynamically add or remove HTML tags using JavaScript. This can be useful for creating interactive user interfaces and updating content based on user actions. Below are the approaches to remove and add new HTML tags using JavaScript: Table of Content Using createElement and remove 3 min read How to fade the removal of a DOM Element using CSS and JavaScript ? In this article, we will fade the removal of a DOM Element using CSS and JavaScript.CSS has a vast domain, while basic CSS is essentially copy-pasted, it can become highly complicated when merged with front-end technologies like JavaScript and related frameworks. Therefore it is noticed that some hi 2 min read JavaScript - How to Remove an Element from an Array? Removing elements from an array is a fundamental operation in JavaScript, essential for data manipulation, filtering, and transformation. This guide will explore different methods to efficiently remove elements from an array, enhancing your understanding and capability in handling arrays.1. Using po 3 min read How to Replace the Entire HTML Node using JavaScript? To replace an entire HTML node using JavaScript, you can use methods that allow you to remove an existing node and insert a new one in its place. Approach: Using replace() method Take the new document as a form of string(eg.. Str = '< html > < /html > '). Use .replace() method on the HTM 1 min read Like