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

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
some-alt