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 = '';