How to remove an HTML element using JavaScript ?
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.
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
Example 2: This example uses remove() method to remove an HTML element from the document.
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.
Please Login to comment...