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

  • hakim_yahi-64

    bonjour j'ai supprimé le paragraphe demandé mais l'exercice n'est pas validé.. qu'attendez vous dans cette exercice

  • amady89-31

    on me dit que la balise p ne récupère pas p

  • mathieu.finocchiaro

    var suppr = document.querySelector("div"); suppr.removeChild(suppr.childNodes[3]); P est donc le 3eme enfant car le div contient un id et un H3?? c bien cela qui explique la position 3? Juste pour savoir si mon raisonnement est le bon, Merci

  • jenebakone

    Bonjour pourriez vous m'indiquer mon erreur s'il vous plait?

99 Commentaires

  • mathieu.finocchiaro

    mathieu.finocchiaro

    var suppr = document.querySelector("div"); suppr.removeChild(suppr.childNodes[3]); P est donc le 3eme enfant car le div contient un id et un H3?? c bien cela qui explique la position 3? Juste pour savoir si mon raisonnement est le bon, Merci

    le 16/12/2016 à 17h03

  • jenebakone

    jenebakone

    Bonjour pourriez vous m'indiquer mon erreur s'il vous plait?

    le 31/10/2016 à 11h07

  • omr.khouas

    omr.khouas

    Bonjour, ç'a l'aire de bien fonctionner à l’exécution en JS mais l'exercice ne se valide pas! pourriez vous me dire pk?!

    le 19/09/2016 à 18h30

  • jovidal

    jovidal

    J'ai encore du mal avec les positionnement.. Je l'ai validé en testant a chaque fois .. Si c'est le 4eme pourquoi "suppr.childNodes[3]" est bon

    le 06/06/2017 à 16h51

  • mram

    mram Administrateur

    Oui presque, n'oubliez pas qu'on compte à partir de zéro: <p> est donc le 4ème noeud trouvé dans le <div>, car le texte dans le <h3> compte aussi.

    le 18/12/2016 à 18h54

  • mram

    mram Administrateur

    Votre premier code est bon, c'est la correction qui bug. Je note ça pour le revoir.

    le 02/11/2016 à 20h49

  • jenebakone

    jenebakone

    bonjour pourriez vous m'indiquer mon erreur?merci

    le 31/10/2016 à 10h46

  • mram

    mram Administrateur

    On demande de récupérer l'élément "div", et là vous récupérez un "p" ... (ligne 1)

    le 21/09/2016 à 09h43

  • patricerameaux

    patricerameaux

    j'ai "p is not defined" : qu'est-ce qui ne va pas ?

    le 22/10/2016 à 14h37

  • mram

    mram Administrateur

    C'est comme un tableau, on compte à partir de zéro.

    le 07/06/2017 à 14h28

  • mram

    mram Administrateur

    C'est un chiffre qu'il faut mettre dans .childNodes[], il correspond à la position de l'élément recherché. Relisez l'explication de l'exercice avec l'exemple.

    le 24/10/2016 à 13h27

  • pascal-ds

    pascal-ds

    Bon, retour sur l'exercice, quelque chose m'échappe. Il semble que "div" ne soit pas récupéré correctement. j'ai le message d'erreur "cannot read property [] of undefined. Quel que soit le chiffre entre les []. J'ai fait un alert(liste.length) pour voir et ça me retourne 1, ce qui n'est pas normal... qu'est-ce qui cloche ?

    le 13/10/2016 à 11h12

  • pascal-ds

    pascal-ds

    bon, avec getElementbyId('bloc') ça fonctionne...

    le 13/10/2016 à 11h16

  • Trov

    Trov

    Je ne trouve pas mon erreur ...Qu'est ce qui ne va pas? Merci

    le 13/10/2016 à 14h55

  • pascal-ds

    pascal-ds

    message : liste.removeChild is not a function...

    le 07/09/2016 à 12h05

  • mram

    mram Administrateur

    Relisez l'exemple, il y a une subtilité (voir mon commentaire sur l'exercice "ajouter un élément")

    le 08/09/2016 à 14h11

  • mram

    mram Administrateur

    @pascal-ds : alert(liste.length) retourne 1 car il n'y a qu'un seul élément <div> dans le HTML donc .getElementsByTagName("div") récupère un tableau qui ne possède qu'un seul élément.

    le 17/10/2016 à 00h12

  • mram

    mram Administrateur

    @Trov : regardez la solution de Trov (message juste au dessus du votre) ...

    le 17/10/2016 à 00h14

  • thierry.galabru

    thierry.galabru

    Bonjour, moi, ça me marque que j'ai réussi l'exercice, alors que en fait j'ai supprimé le titre h3.... et pas le p.

    le 01/10/2016 à 11h02

  • thierry.galabru

    thierry.galabru

    En fait, pour supprimer le p, il a fallu que je le mette en 4ème enfant du div (childNodes[3]), ce qui me semble complètement aberrant, vu que le div en question n'a que 2 enfants.. A moins que quelque chose m'échappe complètement ?

    le 01/10/2016 à 11h24

  • mram

    mram Administrateur

    Normal, childNodes ne récupère pas que les balises HTML mais tous les noeuds, ce qui inclus aussi le texte à l'intérieur des balises :)

    le 01/10/2016 à 14h18

  • v.redois

    v.redois

    Est-ce sérieux ? La fonction "getElementByTag" utilisée dans l'exemple n'existe pas : vous nous avez appris qu'il s'agit de "getElementsByTagName" (déjà dans l'exercice précédent). Passons sur "on a supprimer que le premier enfant", si incorrect et si peu professionnel...

    le 15/06/2016 à 15h32

  • mram

    mram Administrateur

    Merci pour le retour, c'est corrigé.

    le 15/06/2016 à 15h57

  • v.redois

    v.redois

    "On n'a supprimé que le premier..." ou "On a supprimé uniquement le premier..."

    le 15/06/2016 à 15h58

  • v.redois

    v.redois

    et il manque toujours le 's' à "getElementsBy..."

    le 15/06/2016 à 16h01

  • armand1807

    armand1807

    j'ai pas compris comment il fallais compter pour supprimer le p j'ai du faire des teste pourvoir que c'est 3 mais si on pars de 0 alors 0=div 1=h3 2=p non ? donc p est a la position 2 non ?

    le 18/08/2017 à 15h07

  • mram

    mram Administrateur

    Et non, dans le DOM le texte brut compte aussi comme un élément à part entière, donc il faut aussi compter "Titre h3". C'est le but de l'exercice d'essayer de faire comprendre ça :)

    le 22/08/2017 à 12h57

  • bretel.val

    bretel.val

    Bonjour, on me demande si j'ai bien supprimer "p".

    le 24/06/2017 à 16h32

  • mram

    mram Administrateur

    Bonjour, c'est le chiffre entre crochet qui n'est pas bon. N'oubliez pas qu'on compte à partir de zéro. Comme dans un tableau ordonné.

    le 29/06/2017 à 15h46

  • nathalie.chenparis

    nathalie.chenparis

    Bonjour j'ai prit en compte le texte dans la balise h3 du coup j'ai compté : div = 0, h3 = 1, texte h3 = 2 & p = 3 mais ca me met toujours "Cannot read property '3' of undefined"

    le 28/05/2018 à 11h06

  • mram

    mram Administrateur

    Bonjour, utilisez plutôt "querySelector" à la place de "getElementsByTagName".

    le 07/06/2018 à 03h53

  • tomasinilaura1988

    tomasinilaura1988

    Petite question : j'ai essayé de deux manières

    le 13/11/2017 à 22h14

  • mram

    mram Administrateur

    Bonjour, la ligne 2 est inutile.

    le 16/11/2017 à 17h55

  • sylvainung-12

    sylvainung-12

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

    le 07/03/2019 à 00h59

  • meriam

    meriam Administrateur

    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 à 13h35

  • bretel.val

    bretel.val

    J'ai beau avoir modifié ce qu'il y a entre [] par différents nombres, j'ai toujours le même message. Je ne comprends pas.

    le 30/06/2017 à 14h19

  • mram

    mram Administrateur

    Le bon chiffre est le 3, votre code est correct. Si vous activez le JS vous devriez voir le résultat.

    le 07/07/2017 à 10h40

  • ambre.naude

    ambre.naude

    Bonjour, pouvez-vous me dire où est mon erreur s'il vous plait? Merci

    le 22/02/2018 à 17h21

  • mram

    mram Administrateur

    Bonjour, le souci est que vous utilisiez la variable "supp" pour récupérer l'élément "div", mais ensuite vous utilisez la variable "p" qui n'existe pas.

    le 25/02/2018 à 01h32

  • 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 à 18h49

  • meriam

    meriam Administrateur

    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 à 12h09

  • nathalie.chenparis

    nathalie.chenparis

    Bonjour, j'ai toujours l'erreur qui me dit "Cannot read property '3' of undefined" quelque soit le chiffre que j'indique. Voici mon code : var div = document.getElementsByTagName("div"); div.removeChild(div.childNodes[2]); Je pars du principe que div = 0, h3 = 1 & p = 2... Non ?

    le 23/05/2018 à 17h18

  • mram

    mram Administrateur

    Bonjour, vous oubliez de prendre en compte que le texte dans une balise est un nœud aussi.

    le 28/05/2018 à 04h26

  • bot666

    bot666

    il est compliqué de comprendre que les balises sont des noeuds mais les espaces entre les balises le sont aussi.. peut etre j'ai raté le passage le precisant mais il serait utile de faire un rappel je pense !

    le 11/01/2018 à 12h18

  • mram

    mram Administrateur

    Bonjour, ce ne sont pas les espaces mais le texte dans chaque balise qui est un nœud aussi.

    le 12/01/2018 à 02h23

  • bot666

    bot666

    (également je pense que mon code est correct, pouvez vous me le confirmer ou l'infirmer?)

    le 11/01/2018 à 12h20

  • mram

    mram Administrateur

    Bonjour, oui votre code est correct :)

    le 12/01/2018 à 02h24

  • ma.nicolas-46

    ma.nicolas-46

    Bonjour, une question : est-ce qu'on ne devrait pas aussi faire "remove.removeChild(remove.childNodes[3,4]);" En effet, si on supprime la balise p, il reste tout de même le texte en 4eme position non ?

    le 03/07/2018 à 10h56

  • mram

    mram Administrateur

    Bonjour, si on supprime la balise, on supprime aussi ce qu'elle contient.

    le 05/07/2018 à 05h09

  • philgd28

    philgd28

    bonjour l'équipe, je ne vous demande pas si le code est bon .... Mais si soyons fou est-ce que mon code est bon ? j'ai une petite idée sur la question quand même...loll

    le 18/08/2017 à 11h59

  • mram

    mram Administrateur

    Bonjour, oui votre code est correct :)

    le 22/08/2017 à 12h48

  • 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

  • Elyann

    Elyann

    merci meriambensalha^^

    le 11/01/2019 à 18h15

  • djej38-69

    djej38-69

    merci meriam, effectivement ;)

    le 16/12/2019 à 09h19

  • houssamhouti-89

    houssamhouti-89

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

    le 02/01/2020 à 19h16

  • nicolas.dsa.m-85

    nicolas.dsa.m-85

    merci :)

    le 28/03/2019 à 17h57

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