Eliminar nodos

Clase 10 de 29 • Curso de Manipulación del DOM

Contenido del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

26
Proyectos propuestos
04:17 min

Librerías relacionadas

Conclusiones

29
Conclusiones
01:56 min

Tomar examen

Comentarios

Fernando Quinteros Gutierrez

student•

🙅 Eliminar Nodos

Apuntes

Existen 3 formas de eliminar nodos en el DOM

Remove Child
- Podemos eliminar un nodo según a un método que proviene del padre y pasamos la referencia a eliminar
```
padre.removeChild(nodoAEliminar)
```
Remove
- Es la evolución de remove child
- No esta soportado en internet explorer
```
nodoAEliminar.remove()
```

Replace Child

Nos permite remplazar un nodo

padre.replaceChild(nuevoNodo, aRemplazar)

RESUMEN: Podemos eliminar nodos con diferentes métodos que nos provee el DOM como ser removeChild, el cual necesita la referencia del padre a eliminar y del nodo que se eliminara, remove el cual se encarga de eliminar el nodo solo con la referencia deseada a borrar y finalmente replaceChild que nos ayuda remplazar un elemento con las referencias del padre, el nuevo nodo y el elemento a remplazar

Juan Diego Loaiza Martinez

student•

Gracias por los resumenes.

Efraín Hernández García

student•

Excelente resumen de estos métodos.

Carlos Eduardo Gomez García

teacher•

También debemos aprender a eliminar nodos dentro del HTML, si podemos agregarlos... ¿Por qué no podríamos eliminarlos? ¡Claro que se puede!, y para ello, JavaScript nos ofrece 3 formas: .

parentElement.removeChild(): Elimina un elemento hijo a partir del elemento padre:

// Nota: En la clase se hizo con $0, pero yo te lo dejo en cómo lo harías normalmente con JavaScript

// Selecciono el elemento que quiero eliminar
const nodoAEliminar = document.querySelector("selector")
// Selecciono a su padre directo
const parentElement = nodoAEliminar.parentElement
// Lo elimino
parentElement.removeChild(nodoAEliminar)

docuement.remove(): Es la evolución de removeChild Y... tampoco es soportado por Internet Explorer ¬¬! . No importa, aquí está el polyfill:D https://developer.mozilla.org/es/docs/Web/API/ChildNode/remove#polyfill

// Selecciono el elemento que quiero eliminar
const nodoAEliminar = document.querySelector("selector")

// Lo elimino uwu
nodoAEliminar.remove()

document.replaceChild(): Reemplaza un nodo (en pocas palabras lo elimina y mete otro)

// Selecciono un padre
const padre = document.querySelector("selector")

// Selecciono el elemento al que voy a reemplazar
const toReplace = document.querySelector("selector")

// Creo el nodo por el cual lo voy a reemplazar
const node = document.createElement("h1")
// Le pongo un texto
node.textContent = "Un texto cualquiera"

// Lo reemplazo >:D!!!
parent.replaceChild(node, toReplace)

Sergio Sanchez

student•

Gracias RetaxMaster, excelentes resumenes en este curso.

Joseph Manuel Salen Pantoja

student•

También hay otro método de reemplazar nodos que es node.replaceWith :D . node.replaceWith: También nos sirve para reemplazar un nodo, pero de una manera más cómoda ya que no necesitamos pasar dos argumentos sino solo uno -> el nuevo nodo, lo que hace que sea incluso más fácil de leer: .

const nodoACambiar = document.querySelector('h2')
const nodoNuevo = document.createElement('h1')
nodoNuevo.textContent = "Nuevo Nodo"

nodoACambiar.replaceWith(nodoNuevo)

Antiguo DOM:

div
|_h2 'Old text'

Nuevo DOM:

div
|_h1 'Nuevo Nodo'

Anfernee Valera

student•

Está muy bueno y sencillo de usar :D, Gracias por el aporte.

Carlos Escribano Clemente

student•

Si, así lo hice yo también porque me lo sugirió la consola, el tema, como se comenta otras veces, es conocer el soporte en los distintos navegadores y versiones

Andres Felipe Pinchao Ramirez

student•

/* 
    Eliminar Nodos

Asi como podemos crear, agregarlos y modificar
tambien podremos eliminar nuestros nodos.

-> parentElement.removeChild

-> document.remove

-> document.replaceChild //remplazar nodo

*/

// Selecciono el elemento que quiero eliminar

const nodoAEliminar = document.querySelector("id")

// Selecciono al padre directo

const padre = document.querySelector("class")

/* Eliminamos el elemento pasandole por parametro
   lo que queremos eliminar al metodo removeChild() 
*/

padre.removeChild(nodoAEliminar)

/* Tambien podremos eliminarlo de otro forma 
con la propiedad parentElement que hace referencia
al padre del elemento que queremos eliminar */

const padre2 = nodoAEliminar.parentElement;

padre2.removeChild(nodoAEliminar);


/*
   node.remove  

 ->Es la evolución de removeChild

 -> No soportado IE

 Remove no nos pedira ningun padre ni tampoco ninguna referencia

 Solo necesitamos seleccionar el elemento que queremos eliminar
 y utilizar el metodo .remove() y se eliminara

*/
const elementoEliminar = document.querySelector("div");

elementoEliminar.remove();

/* 
    node.replaceChild

    para utilizar replace child necesitamos el padre
    el elemento a remplazar y el elemento de referencia

*/

//seleccionamos el elemento padre
const elementoPadre = document.querySelector('idContenedor');

//selecionamos la referencia del elemento que queremos remplazar

const elementoRemplazo = document.querySelector('idQuevamosARemplazar');

//creamos el elemento nuevo por el cual vamos a remplazar al otro

const elementoNuevo = document.createElement('h1');

//agregamos texto al elemento nuevo
elementoNuevo.textContent = "Form Checkout";

/* Utilizamos el metodo .replaceChild  que recibe por parametro
  el elemento nuevo y el segundo el elemento por el cual lo vamos
  a remplazar*/
elementoPadre.replaceChild(elementoNuevo,elementoRemplazo);

Jimmy Buriticá Londoño

student•

Muy bien explicado, gracias

Andrés Felipe García Rendón

student•

Muchas gracias por compartir tus apuntes. Saludos

Sebastian Heredia

student•

Pienso que para eliminar un nodo por mas grande que sea el proyecto usar un "removeChild" es algo innecesario puesto que simplemente podemos seleccionar con $0 el nodo y gulag. . Las nuevas implementaciones de remove y de append sin ninguna propiedad es demasiado útil. :)

Raul Armas

student•

También exite parentNode.replaceChildren(), el cual permite reemplazar un array de nodos por otro:

Asly Nabil Lamas Corrales

student•

Cómo se haría para cambiarle una propiedad de una etiqueta, por ejemplo cambiarle una clase por otra, o el nombre del id, O por ejemplo cómo se haría para cambiar el tamaño a una imagen o algún estilo de esta?

Iris Valentina Barrios

student•

¡Hola Platzinauta 🖐! Si deseas agregar, eliminar o desactivar una Clase de tu Elemento, puedes usar **** Para agregar, eliminar o editar estilos puedes usar **** Puedes ver la documentación en los links que te dejé antes :D

Dario Paladines

student•

Para los nuevos, y supongo que lo hablarán mas adelante en alguna clase pero, para agregar o quitar clases es simplemente:

nodo.classList.add("nuevo nombre de la clase")
nodo.classList.remove("nombre de la clase a eliminar")

Y para los estilos igualmente:

nodo.style.backgroundImage = ("valores correspondientes")

Juan Gui Arenas

student•

:O Aww este curso me esta sirviendo mucho, cada clase se aprende mucho y el profersor explica muy bien :)

Roberto Medina

student•

Hola:

En el minuto 9:06, no se ven las diapositivas para mostrar de forma gráfica el funcionamiento del replaceChild()

Antes de replaceChild:

Después de replaceChild:

Saludos :)

Martín David Roldán

student•

Hola :D Internet Explorer casi ya no se usa. ¿Se necesita darle soporte?

Cristian Blandon

student•

Depende de tu usuario... Si vas a desarrollar aplicaciones de propósito general para cualquier usuario "particular", te diría que no es necesario.

En cambio, si vas a desarrollar una web app para una empresa en la que sólo usan Internet Explorer por política de sus headquarters y eso es inamovible, bueno, tendrías que darle soporte a IE.

¡Saludos!

Omar García Betanzos

student•

Habrá empresas que lo pidan pero el esfuerzo no compensa, tenemos que convencer de ello a las empresas.

santiago GRENAT SANTIAGO

student•

cada vez que quiero eliminar un elemento necesito primero guardarlo en una const? , o puedo usar $0 y el .remove?

Edgardo Andres Vargas Saenz

student•

Hola santi_g2000, no es necesario guardarlo en una constante, tú puedes seleccionar la etiqueta e inmediatamente agregarle .remove

Marianna Guedez

student•

ELIMINAR NODOS

Melba Indhira Tejada Leonardo

student•

La función removeChild() requiere como parámetro el nodo que se va a eliminar. Además, esta función debe ser invocada desde el elemento padre de ese nodo que se quiere eliminar. La forma más segura y rápida de acceder al nodo padre de un elemento es mediante la propiedad nodoHijo.

Juan Diego Loaiza Martinez

student•

Hasta el momento, bastante bien el profesor

Daniel David Mármol Rivero

student•

_ parentElement.removeChild document.remove document.replaceChild _

Luis Berenguer

student•

El método remove( ) parece más útil que removeChild( ) a primera vista.

jonathan gonzalez

student•

Hola profes tengo una pregunta, que es mejor usar cuando estyo haciendo un web para ocultar secciones los métodos que vimos como remove() o usar los display: none de CSS.

Es que normalmente cuando hago una landing oculto las vistas con display: none; pero ahora viendo esta clase veo que se pueden remover y me genera la duda de cual es mejor

Gracias y saludos!!

Andres Roberto Coello Goyes

student•

Puedes usar un "Loading de fondo" como lo muestra esta libreria: https://v4.mui.com/components/backdrop/

Donde se muestra el loading y el resto no se podra manipular hasta que desaparezca el loading.

Isaac Molina

student•

¿Por que se usa la propiedad ".textContent" y no la de "innerHTML" ?

Jonathan 🦑 Alvarez

teacher•

Hola Isaac, es una pregunta buenísima y super importante porque tiene que ver con seguridad – y muy seria. En clases posteriores me adentro en ello :)

Josue Granados

student•

Existen muchas formas de modificar/agregar/sobreescribir el texto de un elemento HTML. Para responder a tu pregunta textContent literalmente modifica/regresa el texto dentro de un elemento HTML sin formato alguno (estilo, saltos de linea, tabs, etc). . Hay una propiedad similar llamada innerText que representa el texto dentro de un elemento con todo y formato (estilo, salto de linea, etc). . Las diferencias entre innerHTML, innerText y textContent son muy interesantes :) . Te dejo un link donde puedes leer más aquí

Omar Castillo Ortiz

student•

las diapositivas no esta para descargar alguien sabe donde la encuntro?

Joalin Pineda

student•

¡Hola! Casi en todos los cursos las puedes encontrar en la primera clase, también te las comparto por acá.

Charles Castillo Rosas

student•

Mis apuntes en Notion💚

// Nota: En la clase se hizo con $0, pero yo te lo dejo en cómo lo harías normalmente con JavaScript

// Selecciono el elemento que quiero eliminar
const nodoAEliminar = document.querySelector("selector")
// Selecciono a su padre directo
const parentElement = nodoAEliminar.parentElement
// Lo elimino
parentElement.removeChild(nodoAEliminar)

// Selecciono un padre
const padre = document.querySelector("selector")

// Selecciono el elemento al que voy a reemplazar
const toReplace = document.querySelector("selector")

// Creo el nodo por el cual lo voy a reemplazar
const node = document.createElement("h1")
// Le pongo un texto
node.textContent = "Un texto cualquiera"

// Lo reemplazo >:D!!!
parent.replaceChild(node, toReplace)

const nodoACambiar = document.querySelector('h2')
const nodoNuevo = document.createElement('h1')
nodoNuevo.textContent = "Nuevo Nodo"

nodoACambiar.replaceWith(nodoNuevo)

Antiguo DOM:

div
|_h2 'Old text'

Nuevo DOM:

div
|_h1 'Nuevo Nodo'

/* 
    Eliminar Nodos

Asi como podemos crear, agregarlos y modificar
tambien podremos eliminar nuestros nodos.

-> parentElement.removeChild

-> document.remove

-> document.replaceChild //remplazar nodo

*/

// Selecciono el elemento que quiero eliminar

const nodoAEliminar = document.querySelector("id")

// Selecciono al padre directo

const padre = document.querySelector("class")

/* Eliminamos el elemento pasandole por parametro
   lo que queremos eliminar al metodo removeChild() 
*/

padre.removeChild(nodoAEliminar)

/* Tambien podremos eliminarlo de otro forma 
con la propiedad parentElement que hace referencia
al padre del elemento que queremos eliminar */

const padre2 = nodoAEliminar.parentElement;

padre2.removeChild(nodoAEliminar);


/*
   node.remove  

 ->Es la evolución de removeChild

 -> No soportado IE

 Remove no nos pedira ningun padre ni tampoco ninguna referencia

 Solo necesitamos seleccionar el elemento que queremos eliminar
 y utilizar el metodo .remove() y se eliminara

*/
const elementoEliminar = document.querySelector("div");

elementoEliminar.remove();

/* 
    node.replaceChild

    para utilizar replace child necesitamos el padre
    el elemento a remplazar y el elemento de referencia

*/

//seleccionamos el elemento padre
const elementoPadre = document.querySelector('idContenedor');

//selecionamos la referencia del elemento que queremos remplazar

const elementoRemplazo = document.querySelector('idQuevamosARemplazar');

//creamos el elemento nuevo por el cual vamos a remplazar al otro

const elementoNuevo = document.createElement('h1');

//agregamos texto al elemento nuevo
elementoNuevo.textContent = "Form Checkout";

/* Utilizamos el metodo .replaceChild  que recibe por parametro
  el elemento nuevo y el segundo el elemento por el cual lo vamos
  a remplazar*/
elementoPadre.replaceChild(elementoNuevo,elementoRemplazo);

Eliminar nodos

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones