In this article, we will discuss three simple ways to remove a specific ‘div’ element using plain Javascript.
Using parentNode.removeChild(): This method removes a specified child node from the DOM tree and returns the removed node.
- Syntax:
element.parentNode.removeChild(element)
- Example: This example uses the parentNode.removeChild() method to remove a specific ‘div’ element.
html
<!DOCTYPE html><html> <head> <title> Remove specific divisible element using Javascript </title> </head> <body style="text-align: center;"> <h1 style="color: green;"> GeekforGeeks </h1> <div id="gfg_up" style="font-size: 15px; font-weight: bold;"> A Computer Science Portal for Geeks </div> <br /> <button onclick="GFG_click()"> click to remove </button> <hr /> <div id="gfg_down" style="font-size: 15px; font-weight: bold;"> A Computer Science Portal for Geeks </div> <script type="text/javascript"> function GFG_click() { var gfg_down = document.getElementById("gfg_down"); gfg_down.parentNode.removeChild(gfg_down); } </script> </body></html> |
- Output:
Using outerHTML property: The outerHTML property is used to set the contents of the HTML element. Hence we can remove a specified ‘div’ element by setting its contents to “” using the outerHTML property.
- syntax:
element.outerHTML=""
- Example: This example uses the outerHTML attribute to remove a specific ‘div’ element.
html
<!DOCTYPE html><html> <head> <title> Remove specific divisible element using Javascript </title> </head> <body style="text-align: center;"> <h1 style="color: green;"> GeekforGeeks </h1> <div id="gfg_up" style="font-size: 15px; font-weight: bold;"> A Computer Science Portal for Geeks </div> <br /> <button onclick="GFG_click()"> click to remove </button> <hr /> <div id="gfg_down" style="font-size: 15px; font-weight: bold;"> A Computer Science Portal for Geeks </div> <script type="text/javascript"> function GFG_click() { document.getElementById("gfg_down") .outerHTML = ""; } </script> </body></html> |
- Output:
Using .remove():This method removes the specified div element and all its child nodes.
- syntax:
element.remove()
- Example: This example uses the remove() method to remove a specific ‘div’ element.
html
<!DOCTYPE html><html> <head> <title> Remove specific divisible element using Javascript </title> </head> <body style="text-align: center;"> <h1 style="color: green;"> GeekforGeeks </h1> <div id="gfg_up" style="font-size: 15px; font-weight: bold;"> A Computer Science Portal for Geeks </div> <br /> <button onclick="GFG_click()"> click to remove </button> <hr /> <div id="gfg_down" style="font-size: 15px; font-weight: bold;"> A Computer Science Portal for Geeks </div> <script type="text/javascript"> function GFG_click() { var gfg_down = document.getElementById("gfg_down"); gfg_down.remove(); } </script> </body></html> |
- Output:
