En este artículo, discutiremos tres formas simples de eliminar un elemento ‘div’ específico usando Javascript simple.
Uso de parentNode.removeChild(): este método elimina un Node secundario específico del árbol DOM y devuelve el Node eliminado.
- Sintaxis:
element.parentNode.removeChild(element)
- Ejemplo: este ejemplo utiliza el método parentNode.removeChild() para eliminar un elemento ‘div’ específico.
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>
- Producción:
Uso de la propiedad HTML exterior: la propiedad HTML exterior se utiliza para establecer el contenido del elemento HTML. Por lo tanto, podemos eliminar un elemento ‘div’ especificado configurando su contenido en «» usando la propiedad outsideHTML.
- sintaxis:
element.outerHTML=""
- Ejemplo: este ejemplo usa el atributo outsideHTML para eliminar un elemento ‘div’ específico.
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>
- Producción:
Usando .remove(): este método elimina el elemento div especificado y todos sus Nodes secundarios.
- sintaxis:
element.remove()
- Ejemplo: este ejemplo utiliza el método remove() para eliminar un elemento ‘div’ específico.
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>
- Producción:
Publicación traducida automáticamente
Artículo escrito por DishaSinha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA