Eliminar elementos del DOM

Se puede hacer directamente o desde el padre.

Método .remove()

Con este método puedo remover un elemento directamente

const primerEnlace = document.querySelector('a'); //Selecciono el elemento
primerEnlace.remove(); //Lo remuevo

Método .removeChild

Con este método puedo remover el hijo de un elemento seleccionado pero debo pasarle la referencia del hijo

const navegacion = document.querySelector('.navegacion'); //Selecciono el padre del elemento a remover
console.log(navegacion.children); //Listo los hijos
navegacion.removeChild(navegacion.children[2]); //Remuevo uno de los hijos

const borrar = navegacion.children[2]; // Otra forma es creando una variable...
navegacion.removeChild(borrar);

Método .reset() para formularios

Cuando se tiene seleccionado un elemento <form> por, digamos un query selector, aún cuando el campo input es un sub elemento en el html, el formulario contempla todos sus componentes. Con esto quiero decir que si aplicamos el método .reset() a la variable que tiene el elemento <form> por medio de un query selector, esto borrará el contenido del sub elemento <textarea> en ese formulario.

<form  id="formulario">
     <label for="tweet"></label>
     <textarea id="tweet" class="u-full-width"></textarea>
     <input type="submit" class="button u-full-width button-primary" value="Agregar">
</form>

const formulario = document.querySelector('#formulario');
formulario.reset();

Remover elementos de un contenedor

Pasa y lo he observado en los proyectos, que es necesario remover elementos HTML previamente creados con JavaScript para hacer reset de la información ya sea porque se va a añadir una nueva info actualizada.

Con While loop

Con el loop while pregunto si ese contenedor tiene algún elemento hijo, si es así, el código que se ejecuta es un remove child de ese primer elemento del contenedor, luego vuelve a preguntarlo, y así hasta que no haya más elementos hijos de ese contenedor.

while( contenedor.firstChild ) {
     contenedor.removeChild( contenedor.firstChild );
}

Con el método innerHTML

Supuestamente esta forma no es muy utilizada. Pero hay que conocerla. SI tengo elementos dentro de, por ejemplo, un <div>, debería poder quitar esos elementos seleccionando ese contenedor y aplicando un innerHTML y asignándole un string vacío.

contenedorCarrito.innerHTML = '';