How to remove specific div element by using JavaScript?
Last Updated :
20 Dec, 2023
In this article, we will discuss three simple ways to remove a specific ‘div’ element using plain JavaScript.
These are the following methods:
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() {
let gfg_down =
document.getElementById("gfg_down");
gfg_down.parentNode.removeChild(gfg_down);
}
</ script >
</ body >
</ html >
|
Output:
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:
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() {
let gfg_down =
document.getElementById("gfg_down");
gfg_down.remove();
}
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...