JavaScript Academy · Lezione

Rimuovere e sostituire nodi

Rimuova e sostituisca gli elementi in sicurezza.

Rimuovere e sostituire nodi è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Rimuovere i nodi

Oltre ad aggiungere elementi, spesso è necessario rimuoverli o sostituirli. I metodi moderni del DOM rendono queste operazioni concise e leggibili.

remove

remove scollega direttamente un elemento dal DOM, senza bisogno di un riferimento al genitore.

const alert = document.querySelector(".alert");
alert.remove();

removeChild

Il precedente removeChild viene chiamato sul genitore e restituisce il nodo rimosso, consentendone il riutilizzo.

const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);

Rimuovere più elementi

Per rimuovere tutti i figli, esegua un ciclo finché l'elemento non è vuoto oppure imposti innerHTML su una stringa vuota (è veloce, ma elimina i riferimenti).

while (list.firstChild) {
  list.removeChild(list.firstChild);
}

replaceWith

replaceWith sostituisce un elemento con uno o più nuovi nodi o stringhe in una sola chiamata.

const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);

replaceWith con più nodi

replaceWith accetta diversi argomenti, quindi può sostituire un nodo con molti altri.

old.replaceWith(headerEl, bodyEl);

replaceChild

Il metodo classico replaceChild(newNode, oldNode) viene chiamato sul genitore. Presti attenzione all'ordine degli argomenti: prima il nuovo nodo, poi quello precedente.

list.replaceChild(newItem, oldItem);

I nodi scollegati persistono

Un nodo rimosso non viene distrutto. Se ne conserva un riferimento, può reinserirlo in seguito, una soluzione utile per i pattern di visualizzazione e occultamento.

const saved = panel;
panel.remove();
// later:
container.append(saved);

replaceChildren

replaceChildren sostituisce tutti i figli di un elemento in una sola volta oppure li rimuove quando viene chiamato senza argomenti.

list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren();             // remove everything

Memoria e listener

Rimuovere un elemento impedisce anche l'esecuzione dei suoi listener di eventi mentre è scollegato. Se lo aggiunge nuovamente, i listener associati all'elemento stesso rimangono attivi.

btn.addEventListener("click", handler);
btn.remove();          // handler will not fire while detached
container.append(btn); // handler works again

Scegliere un metodo

Preferisca remove e replaceWith per il codice moderno e pulito. Utilizzi removeChild/replaceChild quando deve recuperare il nodo restituito o supportare ambienti molto datati.

Verifica rapida

Controlli l'ordine degli argomenti.

Riepilogo

Rimuova i nodi con il moderno remove oppure con il metodo basato sul genitore removeChild. Li sostituisca con replaceWith (moderno e con più argomenti) oppure con replaceChild(newNode, oldNode). Utilizzi replaceChildren per reimpostare tutti i figli. I nodi scollegati rimangono in memoria e possono essere reinseriti in seguito.

Domande Frequenti

La lezione «Rimuovere e sostituire nodi» è gratuita?

Sì — il testo completo di «Rimuovere e sostituire nodi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Rimuovere e sostituire nodi»?

Rimuova e sostituisca gli elementi in sicurezza. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Rimuovere e sostituire nodi»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy