Cómo eliminar a todos los hijos de un elemento DOM

Dado un elemento DOM, ¿cómo se eliminan todos sus elementos secundarios?

Dado un elemento en el DOM, usequerySelector()para identificarlo, así:

const item = document.querySelector('#itemId')

luego, para eliminar todos sus elementos secundarios, tiene algunas soluciones diferentes.

La forma más rápida se ve así:

item.innerHTML = ''

Otra solución que se sugiere es la siguiente: cree un bucle, compruebe si elfirstChildla propiedad está definida (el elemento tiene al menos un hijo) y luego elimínelo:

const item = document.querySelector('#itemId')
while (item.firstChild) {
  item.removeChild(item.firstChild)
}

El ciclo termina cuando se eliminan todos los niños.

La primera, en la mayoría de los puntos de referencia de rendimiento que verifiqué, parece ser la solución más rápida.


Más tutoriales de navegador:


Tech Wiki en línea!