Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Ajouter et Supprimer des Éléments | Manipulation du DOM
Maîtrise Avancée de JavaScript

bookDéfi : Ajouter et Supprimer des Éléments

Tâche

Vous construisez un panier d'achat où les utilisateurs peuvent ajouter et supprimer des articles.

  1. Ajouter un article au panier :
    • Créez un nouvel élément <li>;
    • Créez un nouvel élément <button>;
    • Ajoutez le nouvel élément <button> au nouvel élément <li>;
    • Ajoutez un nouvel élément <li> à la <ul> avec l'ID cart-list.
  2. Supprimer un article du panier : Supprimez l'élément <li> spécifique de la <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilisez createElement pour créer un nouvel élément <li>;
  • Utilisez createElement pour créer un nouvel élément <button>;
  • Utilisez appendChild pour ajouter un nouvel élément <button> à l'élément <li>;
  • Utilisez appendChild pour ajouter un nouvel élément <li> à la <ul> avec l'ID cart-list;
  • Utilisez removeChild pour supprimer l'élément <li> spécifique de la <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 11

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.22

bookDéfi : Ajouter et Supprimer des Éléments

Glissez pour afficher le menu

Tâche

Vous construisez un panier d'achat où les utilisateurs peuvent ajouter et supprimer des articles.

  1. Ajouter un article au panier :
    • Créez un nouvel élément <li>;
    • Créez un nouvel élément <button>;
    • Ajoutez le nouvel élément <button> au nouvel élément <li>;
    • Ajoutez un nouvel élément <li> à la <ul> avec l'ID cart-list.
  2. Supprimer un article du panier : Supprimez l'élément <li> spécifique de la <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilisez createElement pour créer un nouvel élément <li>;
  • Utilisez createElement pour créer un nouvel élément <button>;
  • Utilisez appendChild pour ajouter un nouvel élément <button> à l'élément <li>;
  • Utilisez appendChild pour ajouter un nouvel élément <li> à la <ul> avec l'ID cart-list;
  • Utilisez removeChild pour supprimer l'élément <li> spécifique de la <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 11
some-alt