Exercice 2/3
Dans le fichier script.js :
- récupérez le
divprésent dans le DOM; - récupérez le
pprésent dans la div; - supprimez le paragraphe
pde ladiv; - 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 aveclengthet 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.
184 Commentaires
-
RAHIM Adel
var div = document.querySelector("div"); var p = div.querySelector("p"); div.removeChild(p);le 01/11/2021 à 00h54
-
meriam Admin
Bonjour, votre code fonctionne correctement.
le 08/11/2021 à 00h33
-
Akira
Mon code me semble bon. pouvez vous controler?le 09/06/2021 à 13h03
-
meriam Admin
Bonjour, vous devez corriger la méthode querySelector() (vous avez écrit querSelector())
le 09/06/2021 à 16h50
-
yoannaucher-92
bonjour, le bouton soumettre ne fonctionne pas pour moi, je ne peux pas valider mon code.le 10/03/2021 à 21h19
-
meriam Admin
Bonjour, le bouton fonctionne correctement.
le 11/03/2021 à 09h14
-
fred.glemeau94-21
bonsoir , y'a t-il un souci avec le code ?le 11/02/2021 à 17h19
-
meriam Admin
Bonjour, pour récupérer p ==>var p = div.querySelector("p");
le 12/02/2021 à 07h51
-
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 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
Autant pour moi, c'est bon. ^^le 18/04/2020 à 09h08
-
benoitgrelet-6
C'est bon! :)le 21/01/2020 à 13h13
-
houssamhouti-89
var div = document.querySelector("div"); var p = div.querySelector("p"); div.removeChild(p);le 02/01/2020 à 17h16
-
djej38-69
merci meriam, effectivement ;)le 16/12/2019 à 07h19
-
potel.jeremy-38
Merci meriam, c'est bon je comprends la logique :)le 13/12/2019 à 11h54
-
nkeshimanabrice-37
Merci pour votre correction mram...le 11/11/2019 à 15h50
-
nicolas.dsa.m-85
merci :)le 28/03/2019 à 15h57
-
sylvainung-12
Bonjour, pourriez-vous me dire ce qu'il ne va pas dans mon code ? Merci.le 06/03/2019 à 22h59
-
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
merci meriambensalha^^le 11/01/2019 à 16h15
-
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 testle 09/01/2019 à 16h49
-
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
Commentaires les mieux notés