Eliminar nodos
Contenido del curso
Operaciones básicas
Workshop 1: Fetch
Eventos
Workshop 2: Lazy loading
Workshop 3
Librerías relacionadas
Conclusiones
Eliminar nodos
Contenido del curso
Eliminar nodos
Fernando Quinteros Gutierrez
Estudiante
Juan Diego Loaiza Martinez
Estudiante
Efraín Hernández García
Estudiante
Carlos Eduardo Gomez García
Estudiante
Sergio Sanc
Estudiante
Joseph Manuel Salen Pantoja
Estudiante
Anfernee Valera
Estudiante
Carlos Escribano Clemente
Estudiante
Andres Felipe Pinchao Ramirez
Estudiante
Jimmy Buriticá Londoño
Estudiante
Andrés Felipe García Rendón
Estudiante
Sebastian Heredia
Estudiante
Raul Armas
Estudiante
Asly Nabil Lamas Corrales
Estudiante
Iris Valentina Barrios
Estudiante
Dario Paladines
Estudiante
Juan Gui Arenas
Estudiante
Roberto Medina
Estudiante
Martín David Roldán
Estudiante
Cristian Blandon
Estudiante
Omar García Betanzos
Estudiante
santiago GRENAT SANTIAGO
Estudiante
Edgardo Andres Vargas Saenz
Estudiante
Marianna Guedez
Estudiante
Melba Indhira Tejada Leonardo
EstudianteJuan Diego Loaiza Martinez
Estudiante
Daniel David Mármol Rivero
Estudiante
Luis Berenguer
Estudiante
jonathan gonzalez
Estudiante
Andres Roberto Coello Goyes
Estudiante
Isaac Molina
Estudiante
Jonathan 🦑 Alvarez
Profesor
Josue Granados
Estudiante
Omar Castillo Ortiz
Estudiante
Joalin Pineda
Estudiante
Charles Castillo Rosas
Estudiante🙅 Eliminar Nodos
Apuntes
Remove Child
padre.removeChild(nodoAEliminar)
Remove
nodoAEliminar.remove()
Replace Child
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
Gracias por los resumenes.
Excelente resumen de estos métodos.
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)
Gracias RetaxMaster, excelentes resumenes en este curso.
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'
Está muy bueno y sencillo de usar :D, Gracias por el aporte.
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
/* 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);
Muy bien explicado, gracias
Muchas gracias por compartir tus apuntes. Saludos
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. :)
También exite parentNode.replaceChildren(), el cual permite reemplazar un array de nodos por otro:
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?
¡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
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:
:O Aww este curso me esta sirviendo mucho, cada clase se aprende mucho y el profersor explica muy bien :)
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 :)
Hola :D Internet Explorer casi ya no se usa. ¿Se necesita darle soporte?
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!
Habrá empresas que lo pidan pero el esfuerzo no compensa, tenemos que convencer de ello a las empresas.
cada vez que quiero eliminar un elemento necesito primero guardarlo en una const? , o puedo usar $0 y el .remove?
Hola santi_g2000, no es necesario guardarlo en una constante, tú puedes seleccionar la etiqueta e inmediatamente agregarle .remove
ELIMINAR NODOS
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.
Hasta el momento, bastante bien el profesor
_ parentElement.removeChild document.remove document.replaceChild _
El método remove( ) parece más útil que removeChild( ) a primera vista.
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!!
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.
¿Por que se usa la propiedad ".textContent" y no la de "innerHTML" ?
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 :)
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í
las diapositivas no esta para descargar alguien sabe donde la encuntro?
¡Hola! Casi en todos los cursos las puedes encontrar en la primera clase, también te las comparto por acá.
Mis apuntes en Notion💚