Eliminar nodos

🙅 Eliminar Nodos

• 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)

• 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)

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'

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

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:
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/replaceChildren

😮 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 😃

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.

Mis apuntes en Notion💚

remove.child()

Eliminar nodos metodos

Gracias a los Dioses del Internet, han hecho un poco más sencillo hacer código en estos tiempos.

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

que bien muy util saber la esencia y /o bases de los grandes frameworks como vue, react y angular

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=“divA”>Esto <span>es</span>un texto</div>

// Lee el contenido textual:
var text = document.getElementById(“divA”).textContent;
// |text| contiene la cadena “Esto es un texto”.

// Escribe el contenido textual:
document.getElementById(“divA”).textContent = “Esto es un nuevo texto”;
// El HTML “divA” ahora contiene una nueva cadena:
// <div id=“divA”>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)

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

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>