Exercice 2/3

Dans le fichier script.js :

  • récupérez le div présent dans le DOM;
  • récupérez le p présent dans la div;
  • supprimez le paragraphe p de la div;
  • cliquez sur Soumettre ma réponse.

Leçon 2/3

Si il est possible d'ajouter un élément enfant avec .appendChild(), il est aussi possible de supprimer un élément enfant avec .removeChild(). Pour utiliser cette fonction il faudra aussi :

  • une des fonctions vues pour trouver un élément dans le DOM auquel supprimer un enfant;
  • childNodes, cette propriété récupère une collection (ou tableau) de tous les éléments enfants d'un élément donné. On peut récupérer la longueur du tableau avec length et utiliser une boucle pour supprimer chaque élément;

Exemple :

// on sélectionne une liste "ul"
var liste = document.querySelector("ul");
// on supprime le premier élément enfant
liste.removeChild(liste.childNodes[0]);
// on cherche tous les enfants
var lis = liste.querySelectorAll("li");
// On supprime le 2ème enfants
liste.removeChild(lis[1]);

Dans l'exemple on a supprimé uniquement le premier enfant, si on veut tous les supprimer (surtout si il y en a beaucoup), il faut faire une boucle pour parcourir le tableau avec un itérateur.

Commentaires les mieux notés

  • nkeshimanabrice-37

    nkeshimanabrice-37

    Merci pour votre correction mram...

    le 11/11/2019 à 17h50

  • houssamhouti-89

    houssamhouti-89

    var div = document.querySelector("div"); var p = div.querySelector("p"); div.removeChild(p);

    le 02/01/2020 à 19h16

  • Elyann

    Elyann

    merci meriambensalha^^

    le 11/01/2019 à 18h15

  • benoitgrelet-6

    benoitgrelet-6

    C'est bon! :)

    le 21/01/2020 à 15h13

  • potel.jeremy-38

    potel.jeremy-38

    Merci meriam, c'est bon je comprends la logique :)

    le 13/12/2019 à 13h54

20 Commentaires

  • estelle.le.verger-70

    estelle.le.verger-70

    Autant pour moi, c'est bon. ^^

    le 18/04/2020 à 13h08

  • benoitgrelet-6

    benoitgrelet-6

    C'est bon! :)

    le 21/01/2020 à 15h13

  • houssamhouti-89

    houssamhouti-89

    var div = document.querySelector("div"); var p = div.querySelector("p"); div.removeChild(p);

    le 02/01/2020 à 19h16

  • djej38-69

    djej38-69

    merci meriam, effectivement ;)

    le 16/12/2019 à 09h19

  • potel.jeremy-38

    potel.jeremy-38

    Merci meriam, c'est bon je comprends la logique :)

    le 13/12/2019 à 13h54

  • nkeshimanabrice-37

    nkeshimanabrice-37

    Merci pour votre correction mram...

    le 11/11/2019 à 17h50

index.html
script.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM</title> </head> <body> <h1>Titre h1</h1> <p class="par">Paragraphe 1</p> <h2>Titre h2</h2> <p class="par">Paragraphe 2</p> <ul> <li>Item 1</li> <li>Item 2</li> <li><a href="http://www.google.fr">Item 3</a></li> </ul> <div id="bloc"> <h3>Titre h3</h3> <p class="par">Paragraphe 4</p> </div> <script src="script.js"></script> </body> </html>