How to use outerHTML property In Javascript
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:
How to remove specific div element by using JavaScript?
In this article, we will discuss three simple ways to remove a specific ‘div’ element using plain JavaScript.
These are the following methods:
Table of Content
- Using parentNode.removeChild() method
- Using outerHTML property
- Using .remove() method