Eliminar elemento de JavaScript por ID
-
Establezca el atributo
outerHTMLen una cadena vacía para eliminar el elemento por Id en JavaScript -
Utilice
removeChild()para eliminar elemento por Id en JavaScript -
Use
remove()para eliminar elemento por Id en JavaScript
Este tutorial presenta cómo eliminar un elemento HTML usando su id en JavaScript.
Establezca el atributo outerHTML en una cadena vacía para eliminar el elemento por Id en JavaScript
En este método, seleccionamos el elemento y borramos el contenido HTML asignando una cadena vacía.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
document.getElementById("removeme").outerHTML = "";
</script>
</html>
Es un método simple, pero rara vez se usa debido a las siguientes limitaciones:
- Es un 5-10% más lento que
removeChild()y otros métodos más nuevos de ES5 comoremove(). - No es compatible con versiones anteriores de Internet Explorer.
Utilice removeChild() para eliminar elemento por Id en JavaScript
Primero seleccionamos el elemento usando su id y luego llamamos a la función removeChild() de su padre en este método. Este método ofrece la ventaja de mantener la estructura de árbol de DOM.
Nos obliga a imitar el comportamiento interno de eliminar un elemento del árbol para que no eliminemos el nodo principal.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
function remove(id)
{
var element = document.getElementById(id);
return element.parentNode.removeChild(element);
}
remove("removeme");
</script>
</html>
Use remove() para eliminar elemento por Id en JavaScript
El método remove() se introdujo como parte de ES5. Nos permite eliminar el elemento directamente sin ir a su padre. Pero a diferencia del método removeChild(), no devuelve una referencia al nodo eliminado.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
document.getElementById("removeme").remove();
</script>
</html>
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn