How to remove specific div element by using JavaScript? - GeeksforGeeks

09 Jul, 2021
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:
 
gulshankumarar231
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills