javascript - 链接两个元素，存储它们，并将它们发送到删除函数 - 纯 Javascript

Question

我有一个演示购物车功能的纯 Javascript 原型(prototype)。

我有一个按钮，用于将商品添加到购物车(并切换到开启状态)，然后有一个卡片，用于代表购物车中的商品。

到目前为止我已经工作了；

• 将数据附加到“添加到购物车”按钮 ✓

• 将数据从按钮发送到购物车并创建新的商品卡 ✓

但是，我无法弄清楚如何链接按钮和新创建的项目卡，以便我可以:

• 取出元素卡并将切换按钮关闭或
• 关闭按钮并取出正确的元素卡

https://codepen.io/rhysyg03/pen/PdyyWE

非常感谢您的帮助。

仅供引用 - 这仅用于演示，因此不需要是生产就绪的代码。

谢谢。

const shoppingCartEl = document.querySelector('#js-shopping-cart');
const addToCartButton = document.querySelector('#js-add-to-cart');
var buttonToggle = false;
var itemOneData = {
    name:'Shoes',
    price:"$105.00"
}

function addItem(button, itemData) {
  console.log("ADD");
  // var itemEl = createElement('<div class="item-card"></div>');
  const itemEl = document.createElement("div");
  itemEl.classList.add("item-card");
  itemEl.innerHTML = itemData.name + itemData.price + "<button id='js-item-cart-remove'>Remove</button>";
  shoppingCartEl.appendChild(itemEl);
  const itemCardRemove = document.querySelector('#js-item-cart-remove');
  itemCardRemove.addEventListener('click', () => {
    removeItem();
  })
}

function removeItem() {
  console.log("REMOVE");
  // how to do this part
}

addToCartButton.addEventListener('click', () => {
    if (buttonToggle == false) {
      addItem(addToCartButton, itemOneData);
      buttonToggle = true;
      addToCartButton.innerHTML = "Remove from Cart";
    } else {
      // How to do this part
      removeItem();
      buttonToggle = false;
      addToCartButton.innerHTML = "Add to Cart";
    }
})

Answer 1

(对不起，我有点累了，你应该先读一下结尾)

你应该有这样的项目:

var itemOneData = {
    id: 1,
    name:'Shoes',
    price:"$105.00"
}

var itemTwoData = {
    id: 2,
    name:'Shoes',
    price:"$105.00"
}

然后您应该将标识符存储在项目卡元素上:

...
itemEl.classList.add("item-card");
itemEl.setAttribute("data-item-id", itemData.id)
...

此后，当单击删除按钮时，您应该:

1. 获取要删除的项目的iditemEl.getAttribute("data-item-id")
2. 传递id以删除函数removeItem(id)
3. (这是我放弃的地方)查找属性为“data-item-id”且值为 id 的项目，并将其替换为空字符串“”

还有另一种解决方案，可能远没有那么复杂:当单击“删除”按钮时，只需找到它的父级并将其替换为空字符串。