Eliminación y sustitución de nodos
Elimine y sustituya elementos de forma segura.
Eliminación y sustitución de nodos es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Extraer nodos
Además de agregar elementos, a menudo necesitará eliminarlos o sustituirlos. Los métodos modernos del DOM hacen que estas operaciones sean concisas y fáciles de leer.
remove
remove separa directamente un elemento del DOM, sin necesidad de una referencia al elemento padre.
const alert = document.querySelector(".alert");
alert.remove();removeChild
El antiguo removeChild se invoca sobre el padre y devuelve el nodo eliminado, lo que permite reutilizarlo.
const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);Eliminar varios elementos
Para eliminar todos los hijos, repita el proceso hasta que no quede ninguno o establezca innerHTML como una cadena vacía (es rápido, pero descarta las referencias).
while (list.firstChild) {
list.removeChild(list.firstChild);
}replaceWith
replaceWith sustituye un elemento por uno o varios nodos o cadenas nuevos en una sola llamada.
const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);replaceWith con varios nodos
replaceWith acepta varios argumentos, por lo que puede sustituir un nodo por muchos.
old.replaceWith(headerEl, bodyEl);replaceChild
El método clásico replaceChild(newNode, oldNode) se invoca sobre el padre. Preste atención al orden de los argumentos: primero el nuevo y después el antiguo.
list.replaceChild(newItem, oldItem);Los nodos separados del DOM persisten
Un nodo eliminado no se destruye. Si conserva una referencia, puede volver a insertarlo más adelante, lo que resulta útil para mostrarlo y ocultarlo.
const saved = panel;
panel.remove();
// later:
container.append(saved);replaceChildren
replaceChildren sustituye todos los hijos de un elemento de una sola vez o los elimina cuando se invoca sin argumentos.
list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren(); // remove everythingMemoria y listeners
Al eliminar un elemento, sus listeners de eventos dejan de ejecutarse mientras está separado del DOM. Si vuelve a agregarlo, los listeners asociados al propio elemento permanecen.
btn.addEventListener("click", handler);
btn.remove(); // handler will not fire while detached
container.append(btn); // handler works againElegir un método
Prefiera remove y replaceWith para escribir código moderno y claro. Use removeChild/replaceChild cuando necesite el nodo devuelto o deba admitir entornos muy antiguos.
Comprobación rápida
Compruebe el orden de los argumentos.
Repaso
Elimine nodos con el método moderno remove o con el método removeChild, basado en el elemento padre. Sustitúyalos con replaceWith (moderno y con varios argumentos) o replaceChild(newNode, oldNode). Use replaceChildren para restablecer todos los hijos. Los nodos separados del DOM permanecen en memoria y pueden volver a insertarse más adelante.
Preguntas frecuentes
¿La lección «Eliminación y sustitución de nodos» es gratis?
Sí — el texto completo de «Eliminación y sustitución de nodos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Eliminación y sustitución de nodos»?
Elimine y sustituya elementos de forma segura. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Eliminación y sustitución de nodos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cambio de texto y contenido HTML
- Creación e inserción de elementos
- Modificación de atributos y clases
- Eliminación y sustitución de nodos