A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Eliminar nodos

9/28
Recursos

Aportes 30

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

馃檯 Eliminar Nodos

<h4>Apuntes</h4>
  • Existen 3 formas de eliminar nodos en el DOM
  1. 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)
    
  2. Remove

    • Es la evoluci贸n de remove child
    • No esta soportado en internet explorer
    nodoAEliminar.remove()
    
  3. 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

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)
// 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)
/* 
    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);

Tambi茅n hay otro m茅todo de reemplazar nodos que es node.replaceWith 馃槃
.
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'

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 馃槂

Tambi茅n exite parentNode.replaceChildren(), el cual permite reemplazar un array de nodos por otro:
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/replaceChildren

Pienso que para eliminar un nodo por mas grande que sea el proyecto usar un 鈥渞emoveChild鈥 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. 馃槂

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
_

馃槷 Aww este curso me esta sirviendo mucho, cada clase se aprende mucho y el profersor explica muy bien 馃槂

El m茅todo remove( ) parece m谩s 煤til que removeChild( ) a primera vista.

Por ac谩 dejo la descripci贸n de MDN sobre Node.TextContent.

Node.textContent
La propiedad textContent de la interfaz Node representa el contenido de texto de un nodo y sus dencendientes.

Nota: textContent y HTMLElement.innerText (en-US) son confundidos con facilidad, pero ambos son diferentes en varias formas importantes.

Sintaxis
var text = Node.textContent;
Node.textContent = string;
Valor devuelto
Una cadena de texto o null

Descripci贸n
Al obtener esta propiedad:

Si el nodo es un documento, un DOCTYPE, o una notation, textContent devuelve null. (Para obtener todo el texto y los datos de CDATA data del documento completo, uno podr铆a usar document.documentElement.textContent.)
Si el nodo es una secci贸n CDATA, un comentario, una instrucci贸n de procesamiento, o un nodo de texto, textContent devuelve el texto dentro del nodo, por ejemplo, el Node.nodeValue.
Para otros tipos de nodos, textContent retorna la concatenaci贸n del atributo textContent de todos los nodos hijos, excluyendo los nodos comentario y los nodos de instrucciones. Esto es una cadena vac铆a si el nodo no tiene hijos.
Estableciendo textContent en un nodo elimina todos sus hijos y los reemplaza con un solo nodo de texto con el valor dado.

Diferencias con innerText
Internet Explorer introdujo elemento.innerText. La intenci贸n es muy parecida, con un par de diferencias:

Note que mientras textContent lee el contenido de todos los elementos, incluyendo los elementos <script> (en-US) y <style>, innerText, no.
innerText tambi茅n tiene en cuenta el estilo y no retornar谩 el texto de elementos escondidos, mientras que textContent s铆 lo har谩.
Como innerText tiene en cuenta el estilo CSS, escribirlo disparar谩 un reflow, mientras que textContent no lo har谩.
Diferencias con innerHTML
innerHTML retorna el HTML como su nombre indica. Con bastante frecuencia, para leer o escribir texto en un elemento, la gente usa innerHTML. textContent deber铆a usarse en su lugar. Ya que el texto no es procesado es m谩s probable que tenga mejor rendimiento. Adem谩s, esto evita un vector de ataques XSS.

Ejemplo
// Dado el siguiente fragmento HTML:
// <div id=鈥渄ivA鈥>Esto <span>es</span>un texto</div>

// Lee el contenido textual:
var text = document.getElementById(鈥渄ivA鈥).textContent;
// |text| contiene la cadena 鈥淓sto es un texto鈥.

// Escribe el contenido textual:
document.getElementById(鈥渄ivA鈥).textContent = 鈥淓sto es un nuevo texto鈥;
// El HTML 鈥渄ivA鈥 ahora contiene una nueva cadena:
// <div id=鈥渄ivA鈥>Esto es un nuevo texto</div>

Eliminar NODOS

remove.Child();

//FORMA 1 removeChild()

/*Seleccionamos el elemento que 
queremos eliminar y lo guardamos en una 
variable*/

const delNodo = document.querySelector('H1') 
//Seleccionamos el padre directo
const padre = delNodo.parentElement

/*Ahora lo eliminamos con el metodo
removeChild(parametro)*/

padre.removeChild(delnodo)

node.remove();

  • Es la evolucion de removeChild
  • No soportado IE

Una caracteristica esencial es que no necesita una refencia unicamente ya que tenemos identificado el nodo que vamos a eliminar le aplicamos el metodo remove, no necesita ningun parametro

//FORMA 2 remove()
const delNodo = document.querySelector('H1')
//Aplicamo el metodo y se borra
delNodo.remove()

document.replaceChild();

  • Necesitamos el padre
  • Construccion de el elemnto que va a remplazar
  • Referenc铆a, cual va a ser el elemento a remplazar
const toReplace=document.querySelector('h1')
const padre = toReplace.parentElement;

const newNodo = document.createElement('b')
//Agregamos un peque帽o texto para que se vea
newNodo.textContent = 'Nuevo Nodo'

//Aplicamos el metodo
padre.replaceChild(newNodo,toReplace)

me estresa un poco que ie no tenga soporte para tantas cosas

ELIMINAR NODOS

Apuntes

// eliminar nodos
const box5 = document.querySelector('.box5')
const title5 = document.querySelector('.title5')

box5.remove()

const box6 = document.querySelector('.box6')
const title6 = document.querySelector('.title6')
box6.removeChild(title6)



// reemplazar nodos
const box7 = document.querySelector('.box7')
const oldText = document.querySelector('.title7')
const newText = document.createElement('h1')
newText.textContent = 'reemplazo'
box7.replaceChild(newText, oldText)

Existen 3 funciones que nos ayudan a eliminar nodos:

  • parentElement.removeChild() 鈫 Este metodo se utiliza apartir del padre DIRECTO y dentro de los parametros pondremos el nodo que queremos utilizar.

    Una forma de poder encontrar el nodo puede ser:

const padre = NodoAEliminar.parentElement;

Y ya con eso podemos utilizar el:

padre.removeChild(nodoAEliminar);
  • document.remove() 鈫

Es la evolucion de RemoveChild y no esta soportado por internet explorer.

Este no necesita el padre, solo ponemos el nodo que queramos utilizar:

NodoAEliminar.remove();
  • document.replaceChild 鈫

Este metodo utilizamos el padre, el elemento a remplazar y la referencia.

padre.replaceChild(NodoNuevo, NodoViejo);

M茅todos para eliminar nodos:

const nodoToDelete = document.getElementById('lastName');
const parent = document.getElementsByClassName('class')
parent.removeChild(nodeToDelete) // M茅todo removeChild()
nodeToDelete.remove() // M茅todo remove()

const nodoToReplace = document.getElementById('lastName');
const newNode = document.createElement('h1')
const parent = document.getElementsByClassName('class')
parent.replaceChild(newNode, nodeToReplace) // M茅todo replaceChild()

馃憣

Hay tres formas en la que podemos eliminar nodos

  • parentElement.removeChild: Elimina el hijo directo al que le hacemos referencia desde un elemento padre.
const nodoEliminar = $0
const nodoPadre = nodoEliminar.parentElement
nodoPadre.removeChild(nodoEliminar)
// Esto se pudiera resumir a:
$0.parentElement.removeChild($0)

Antiguo DOM:

div
|_ input

Nuevo DOM:

div
  • parentElement.remove: Es la evoluci贸n de parentElement.removeChild. Remove, no nos pide que se帽alemos un padre o una referencia como lo haciamos con removeChild, 茅l lo hace automaticamente.
const nodoEliminar = $0;
nodoEliminar.remove();
// Con solo esa linea, practicamente hacemos esto:
// $0.parentElement.removeChild($0)

Antiguo DOM:

div
|_ input

Nuevo DOM:

div
  • node.replaceChild: No es una manera de eliminar un nodo, pero si es una manera de modificar, o mejor dicho, reemplazar un nodo. La manera de utilizarlo es la siguiente:

    let oldChild = parentNode.replaceChild(newChild, oldChild);

    const nodoPadre = $0
    const nodoACambiar = document.querySelector('h2')
    
    const nodoNuevo = document.createElement('h1')
    nodoNuevo.textContent = "New Text"
    
    nodoPadre.replaceChild(nodoNuevo, nodoACambiar)
    
    Antiguo DOM:
    
    div
    |_h2 'Old text'
    
    Nuevo DOM:
    
    div
    |_h1 'New Text'
    
  • nodo.parentElement.removeChild(nodo), elimina el nodo.
  • document.remove, evolucion de removeChild y no soportado por IE11
  • document.replaceChild(nodo, nodotoreplace), Nos permite reemplazar un nodo por otro.

Genial

<h4>Eliminar nodos</h4>
node.removeChild(child);
childNode.remove(); //Es la evoluci贸n de removeChild
parentNode.replaceChild(newChild, oldChild);

Podemos acceder al padre de un elemento usando:

const parentElement = node.parentElement;

Remover elementos

  • parent.removeChild

    Este m茅todo elimina el nodo hijo del DOM, y lo retorna. Cabe destacar que este m茅todo funciona solo para hijos directos, es decir, para que el nodo se elimine tiene que ser hijo inmediato del elemento que invoca al m茅todo. Veamos con un ejemplo

    // Nuestro HTML
    <div class="parent">
    	<p class="p-child">Titulo</p>
    	<span class="span-child">Subtitulo</span>
    </div>
    
    // Obtenemos el nodo padre
    const parent = document.querySelector(".parent");
    
    // Obtenemos el nodo a eliminar
    const nodoAEliminar = document.querySelector(".p-child");
    
    // Eliminamos el nodo
    parent.removeChild(nodoAEliminar);
     
    
  • Node.remove

    Es una mejora del m茅todo anterior, este nos permite eliminar un nodo del DOM con solo invocarlos desde el elemento que queremos eliminar, es decir, para este m茅todo no hace falta conocer el padre del elemento, solo lo invocamos y elimina el nodo. Veamos como funciona con el ejemplo anterior

    // Nuestro HTML
    <div class="parent">
    	<p class="p-child">Titulo</p>
    	<span class="span-child">Subtitulo</span>
    </div>
    
    // Obtenemos el nodo a eliminar
    const nodoAEliminar = document.querySelector(".p-child");
    
    // Eliminamos el nodo
    nodoAEliminar.removeChild();
    
  • Node.replaceChild

    Este m茅todo reemplaza un nodo hijo del elemento especificado por otro. Recibe dos argumentos, el primero de ellos es el nuevo elemento, y como segundo argumento el nodo que sera reemplazado por el nuevo. Veamos como funciona usando el ejemplo anterior, supongamos que queremos reemplazar el span por un p谩rrafo.

    // Nuestro HTML
    <div class="parent">
    	<p class="p-child">Titulo</p>
    	<span class="span-child">Subtitulo</span>
    </div>
    
    // Obtenemos el nodo padre
    const parent = document.querySelector(".parent");
    
    // Obtenemos el nodo a reemplazar
    const nodoAReemplazar = document.querySelector(".p-child");
    
    // El nuevo elemento
    const nodoNuevo = document.createElement("p");
    nodoNuevo.textContent = "Soy un nuevo nodo";
    
    // Reemplazamos el nodo
    parent.replaceChild(nodoNuevo, nodoAReemplazar);
    

No sabia que se podia hacer estas cosas, si de alguna forma ingresas codigo o algo malicioso para hacer eliminar el html鈥 baia baia

Hola:

En el remove() se puede agregar una imagen en el minuto 6:12 parecida a la de removeChild del minuto 4:18,

Saludos 馃槂

Tambi茅n podemos Eliminar nuestros elementos del DOM

removeChild: Este metodo permite remover un nodo hijo desde un nodo padre. Este tambien retornar el nodo eliminado por lo tanto se puede hacer dos cosas

Elimina el nodo hijo y almacena en memoria, y no se muestra en el DOM

const nodoEliminado = parentElement.removeChild(child)

Eliminar totalmente el hijo

parentElement.removeChild(child)

remove: Este m茅todo permite remover un nodo del documento. Este m茅todo por dentro ejecuta el removeChild

A partir de una referencia se elimina el nodo.

referencia.remove(nodo)

replaceChild: Este m茅todo permite reemplazar un nodo hijo del elemento especificado por otro

A partir de una referencia se cambia un nodo por otro

referencia.replaceChild(nodo_nuevo, nodo_a_remplazar)

Me encantan tus explicaciones!

Para eliminar nodos podemos recurri a los siguientes metodos 馃摑

  1. removeChild() => Este metodo se debe usar con el padre directo del nodo a elimianar y retorna ese nodo eliminado (el hijo)
<section class="padreNoDirecto">
	<div class="padreDirecto">
		<p class="hijo">Element</p>
	</div>
</section>

const padre = document.querySelector('.padreDirecto');
const hijo = document querySelector('.hijo');

padre.removeChild(hijo);
console.log(padre);
//Output: <div class="padre"></div> 
  1. remove() => Al igual que con appendChild y append este metodo no esta soportado por IE 馃檮 y es la evolucion de removeChild(). Es mas facil de entender y mas practico, simplemente tomamos ese nodo a eliminar y le aplicamos el metodo, sin padre, sin pasarle el nodo a elminar
nodoAEliminar.remove()

3.replaceChild() => Este metodo se usa con el padre directo y recibe 2 parametros, el primero es el nuevo elemento, el segundo es el que se va a remplazar

<div class="padre">
	<p id#"oldP">Hey Platzi!</p>
</div>
const padre = document.querySelector('.padre");
const oldElement = padre.firstElementChild;
const newElement = document.createElement('h1');
newP.textContent = "Hello Platzinauta";

padre.replaceChild(newElement, oldElement);
console.log(padre) 
//output: 
<div class="padre">
	<h1>Hello  Platzinauta</h1>
</div>