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

183 Commentaires

  • RAHIM Adel

    RAHIM Adel

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

    le 01/11/2021 à 00h54

  • meriam

    meriam Admin

    Bonjour, votre code fonctionne correctement.

    le 08/11/2021 à 00h33

  • Akira

    Akira

    Mon code me semble bon. pouvez vous controler?

    le 09/06/2021 à 13h03

  • meriam

    meriam Admin

    Bonjour, vous devez corriger la méthode querySelector() (vous avez écrit querSelector())

    le 09/06/2021 à 16h50

  • yoannaucher-92

    yoannaucher-92

    bonjour, le bouton soumettre ne fonctionne pas pour moi, je ne peux pas valider mon code.

    le 10/03/2021 à 21h19

  • meriam

    meriam Admin

    Bonjour, le bouton fonctionne correctement.

    le 11/03/2021 à 09h14

  • fred.glemeau94-21

    fred.glemeau94-21

    bonsoir , y'a t-il un souci avec le code ?

    le 11/02/2021 à 17h19

  • meriam

    meriam Admin

    Bonjour, pour récupérer p ==>var p = div.querySelector("p");

    le 12/02/2021 à 07h51

  • Philippesoosai-88

    Philippesoosai-88

    Bonjour, je ne vois pas l'erreur dans mon code : var div = document.querySelector("div"); var p = document.querySelector("div > p"); div.removeChild(p);

    le 03/11/2020 à 22h13

  • meriam

    meriam Admin

    Bonjour, pour récupérer le p présent dans la div ==> var p = div.querySelector('p');

    le 04/11/2020 à 07h11

  • estelle.le.verger-70

    estelle.le.verger-70

    Autant pour moi, c'est bon. ^^

    le 18/04/2020 à 09h08

  • benoitgrelet-6

    benoitgrelet-6

    C'est bon! :)

    le 21/01/2020 à 13h13

  • houssamhouti-89

    houssamhouti-89

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

    le 02/01/2020 à 17h16

  • djej38-69

    djej38-69

    merci meriam, effectivement ;)

    le 16/12/2019 à 07h19

  • potel.jeremy-38

    potel.jeremy-38

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

    le 13/12/2019 à 11h54

  • nkeshimanabrice-37

    nkeshimanabrice-37

    Merci pour votre correction mram...

    le 11/11/2019 à 15h50

  • nicolas.dsa.m-85

    nicolas.dsa.m-85

    merci :)

    le 28/03/2019 à 15h57

  • sylvainung-12

    sylvainung-12

    Bonjour, pourriez-vous me dire ce qu'il ne va pas dans mon code ? Merci.

    le 06/03/2019 à 22h59

  • meriam

    meriam Admin

    récupérez le p présent dans la div avec var p = div.querySelector('p'); puis utilisez la fonction removeChild().

    le 07/03/2019 à 11h35

  • Elyann

    Elyann

    merci meriambensalha^^

    le 11/01/2019 à 16h15

  • aurelien69fb-48

    aurelien69fb-48

    bonjour, je ne comprends pas mon erreur: Votre variable p ne fait pas référence à la balise p dans la div. Cela fonctionne pourtant que je le test

    le 09/01/2019 à 16h49

  • meriam

    meriam Admin

    Bonjour, à la ligne 2, utilisez la méthode querySelector("p"), à la ligne 3, il faut juste spécifier p ce qui donne div.removeChild(p).

    le 11/01/2019 à 10h09

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>