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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...