Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende 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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 11

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.22

bookChallenge: Add and Remove DOM Elements

Desliza para mostrar el menú

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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

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