Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Adding and Removing Elements | DOM Manipulation
Advanced JavaScript Mastery
course content

Contenido del Curso

Advanced JavaScript Mastery

Advanced JavaScript Mastery

1. Classes
2. DOM Manipulation
3. Events and Event Handling
4. Asynchronous JavaScript and APIs

bookChallenge: Adding and Removing 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

css

index

js

index

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

css

index

js

index

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 11
some-alt