Cómo eliminar un elemento del DOM en JavaScript

La semana pasada, vimos cómo crear un nuevo elemento e insertarlo en el DOM usando JavaScript estándar. Hoy, veamos cómo eliminar elementos del DOM con JavaScript.

Hay dos formas de borrar un elemento del DOM en JavaScript. Puede ocultar el elemento utilizando estilos en línea o eliminarlo por completo.

Para ocultar el elemento del DOM en JavaScript, puede usar la propiedad de estilo DOM:

// grab element you want to hide
const elem = document.querySelector('#hint');

// hide element with CSS
elem.style.display = 'none';

Como puede ver arriba, acabamos de cambiar el tipo de visualización del elemento a none con la ayuda del style propiedad. Este enfoque es muy útil si desea ocultar temporalmente el elemento del DOM y desea recuperarlo en algún momento en función de las interacciones del usuario.

Alternativamente, si desea eliminar el elemento del DOM por completo, puede usar el removeChild() propiedad:

// grab element you want to hide
const elem = document.querySelector('#hint');

// remove element
elem.parentNode.removeChild(elem);

El removeChild() El método elimina el nodo secundario dado del elemento especificado. Devuelve el nodo eliminado como un Node objeto, o null si el nodo no existe. Funciona en todos los navegadores modernos y antiguos, incluido Internet Explorer.

ES6 remove() Método

El removeChild() El método funciona muy bien para eliminar un elemento, pero solo puede llamarlo en el parentNode del elemento que desea eliminar.

El enfoque moderno para eliminar un elemento es usar el remove() método. Simplemente llame a este método en el elemento que desea eliminar del DOM, como a continuación:

// grab element you want to hide
const elem = document.querySelector('#hint');

// remove element from DOM (ES6 way)
elem.remove();

Este método se introdujo en ES6 y, por el momento, solo funciona en navegadores modernos. Sin embargo, puede usar un polyfill para que sea compatible con Internet Explorer 9 y superior.