Eliminar elemento de JavaScript por ID

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:

1. Es un 5-10% más lento que removeChild() y otros métodos más nuevos de ES5 como remove().
2. 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>