Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Challenge: Add and Remove DOM Elements | DOM Manipulation for Interactive Web Development
Advanced JavaScript Mastery

bookChallenge: Add and Remove DOM Elements

Task

You're building a shopping cart where users can add and remove items.

  1. Add an Item to the Cart:
    • Create a new <li> element;
    • Create a new <button> element;
    • Add new <button> element to the new <li> element;
    • Add a new <li> element to the <ul> with the cart-list ID.
  2. Remove an Item from the Cart: Delete the specific <li> element from the <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Use createElement to create a new <li> element;
  • Use createElement to create a new <button> element;
  • Use appendChild to add new <button> element to the <li> element;
  • Use appendChild to add a new <li> element to the <ul> with the ID cart-list;
  • Use removeChild to delete the specific <li> element from the <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 11

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you show me an example of how to add an item to the cart using JavaScript?

How do I remove a specific item from the cart?

Can you explain how the remove button should work for each cart item?

Awesome!

Completion rate improved to 2.22

bookChallenge: Add and Remove DOM Elements

Swipe to show menu

Task

You're building a shopping cart where users can add and remove items.

  1. Add an Item to the Cart:
    • Create a new <li> element;
    • Create a new <button> element;
    • Add new <button> element to the new <li> element;
    • Add a new <li> element to the <ul> with the cart-list ID.
  2. Remove an Item from the Cart: Delete the specific <li> element from the <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Use createElement to create a new <li> element;
  • Use createElement to create a new <button> element;
  • Use appendChild to add new <button> element to the <li> element;
  • Use appendChild to add a new <li> element to the <ul> with the ID cart-list;
  • Use removeChild to delete the specific <li> element from the <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 11
some-alt