Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Challenge: Add and Remove DOM Elements | DOM Manipulation for Interactive Web Development
Advanced JavaScript Mastery
course content

Зміст курсу

Advanced JavaScript Mastery

Advanced JavaScript Mastery

3. Event Handling and User Interactions in JavaScript
4. Asynchronous JavaScript and API Integration

book
Challenge: 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>.
html

index.html

css

index.css

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>.
html

index.html

css

index.css

js

index.js

copy

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 11
We're sorry to hear that something went wrong. What happened?
some-alt