JavaScript Academy · Leçon

Supprimer et remplacer des nœuds

Supprimez et remplacez des éléments en toute sécurité.

Supprimer et remplacer des nœuds est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Retirer des nœuds

Au-delà de l’ajout d’éléments, vous devez souvent les supprimer ou les remplacer. Les méthodes modernes du DOM rendent ces opérations concises et lisibles.

remove

remove détache directement un élément du DOM, sans avoir besoin d’une référence vers son parent.

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

removeChild

L’ancienne méthode removeChild est appelée sur le parent et renvoie le nœud supprimé, ce qui permet de le réutiliser.

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

Supprimer plusieurs éléments

Pour supprimer tous les enfants, répétez l’opération jusqu’à ce qu’il n’en reste plus ou affectez une chaîne vide à innerHTML (c’est rapide, mais les références sont perdues).

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

replaceWith

replaceWith remplace un élément par un ou plusieurs nouveaux nœuds ou chaînes en un seul appel.

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

replaceWith avec plusieurs nœuds

replaceWith accepte plusieurs arguments, ce qui permet de remplacer un nœud par plusieurs autres.

old.replaceWith(headerEl, bodyEl);

replaceChild

La méthode classique replaceChild(newNode, oldNode) est appelée sur le parent. Faites attention à l’ordre des arguments : le nouveau nœud d’abord, l’ancien ensuite.

list.replaceChild(newItem, oldItem);

Les nœuds détachés persistent

Un nœud supprimé n’est pas détruit. Si vous conservez une référence, vous pouvez le réinsérer plus tard, ce qui est utile pour les mécanismes d’affichage et de masquage.

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

replaceChildren

replaceChildren remplace tous les enfants d’un élément en une seule fois, ou les supprime lorsqu’il est appelé sans argument.

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

Mémoire et écouteurs

La suppression d’un élément empêche également ses écouteurs d’événements de s’exécuter tant qu’il est détaché. Si vous le réajoutez, les écouteurs attachés à l’élément lui-même sont conservés.

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

Choisir une méthode

Privilégiez remove et replaceWith pour un code moderne et clair. Utilisez removeChild/replaceChild lorsque vous avez besoin du nœud renvoyé ou devez prendre en charge des environnements très anciens.

Vérification rapide

Vérifiez l’ordre des arguments.

Récapitulatif

Supprimez les nœuds avec la méthode moderne remove ou avec la méthode removeChild fondée sur le parent. Remplacez-les avec replaceWith (moderne, plusieurs arguments) ou replaceChild(newNode, oldNode). Utilisez replaceChildren pour réinitialiser tous les enfants. Les nœuds détachés restent en mémoire et peuvent être réinsérés plus tard.

Questions Fréquemment Posées

La leçon « Supprimer et remplacer des nœuds » est-elle gratuite ?

Oui — le texte complet de « Supprimer et remplacer des nœuds » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Supprimer et remplacer des nœuds » ?

Supprimez et remplacez des éléments en toute sécurité. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Supprimer et remplacer des nœuds » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy