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

我有一个小的纯Javascript原型来演示购物车的功能

我有一个按钮，将商品添加到购物车（并切换到打开状态），然后有一张卡，表示购物车中的商品

到目前为止，我一直在工作

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

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

但是，我无法确定如何链接按钮和新创建的项目卡，以便：

• 移除项目卡并关闭或关闭按钮
• 关闭按钮并移除正确的项目卡

非常感谢你的帮助

仅供参考-这只是一个演示，所以它不需要是生产准备好的代码

多谢各位

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";
    }
})

const shoppingCartEl=document.querySelector（'js shopping cart'）；
const addToCartButton=document.querySelector（“#js add to cart”）；
var buttonToggle=false；
var itemOneData={
姓名：'Shoes'，
价格：$105.00
}
功能附加项（按钮、项数据）{
控制台日志（“添加”）；
//var itemEl=createElement（“”）；
const itemEl=document.createElement（“div”）；
itemEl.classList.add（“项目卡”）；
itemEl.innerHTML=itemData.name+itemData.price+“删除”；
购物卡特尔（itemEl）；
const itemCardRemove=document.querySelector（“#js item cart remove”）；
itemCardRemove.addEventListener（'单击'，（）=>{
removeItem（）；
})
}
函数removietem（）{
控制台日志（“删除”）；
//这部分怎么做
}
addToCartButton.addEventListener（'单击'，（）=>{
如果（按钮切换==false）{
addItem（addToCartButton，itemOneData）；
按钮切换=真；
addToCartButton.innerHTML=“从购物车中删除”；
}否则{
//这部分怎么做
removeItem（）；
按钮切换=错误；
addToCartButton.innerHTML=“添加到购物车”；
}
})

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

您应该有如下项目：

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

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

然后，您应该在item card元素上存储标识符：

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

在此之后，单击“删除”按钮时，您应该：

获取要删除的项的

id

itemEl.getAttribute（“数据项id”）

传递

id

以删除函数

removietem（id）

（这就是我放弃的地方）找到属性“data item id”值为

id

的项，并将其替换为空字符串“”

---

还有另一个解决方案，可能要简单得多：单击“删除”按钮时，只需找到它的父项并用空字符串替换它。

这是一个快速的解决方案，只是为了获得您要查找的内容，但当然，也许您应该在购物车项目所在的“状态”下，根据该状态呈现UI。在这个快速解决方案中，我所做的是事件委派，因为我们知道在开始时存在的一个元素是cart div。因此，我们将事件放置在这个元素上，然后检查我们单击的元素，并进行一些检查，以确保只可以删除项目卡。codepen.io/anon/pen/WgaYxe？编辑器=1011

希望这对您有所帮助，如果您需要更多详细信息，请随时询问！

---

再见

太宽，没有代码，太难理解answer@NurbolAlpysbayev没问题，这里有一支钢笔。在实际的原型中，类和部分的设置稍微好一点，但是你应该明白这一点。老实说，我已经花了大约15分钟，我的压力水平开始上升到我不想要的水平。为什么？因为你写的代码非常非常不切实际，无法维护等等。人们在5-10年前就这样写了。你应该使用像Vue.js这样的框架或库（对新手和整体来说都更好），现在就做出反应。我强烈建议您使用它们。我已经开始但从未完成的内容，如果您仍然想要解决方案的概念，我将在下面给出答案，因为它会有一些代码或者更好的框架，但对于这个目的来说，这是一个很大的过度。主要目的是向开发人员展示设计/交互，就像这里的材料设计团队一样。我说过它不必是生产代码。谢谢@Maxi。我可以删除购物车项目没有任何问题，这更多的是关于沟通，回到添加到购物车按钮，这是在ON状态。维萨也一样。很高兴这有帮助！谢谢，这很有帮助。我设法使用了一些类似的东西，给按钮和新创建项目卡相同的ID，然后从那里做魔术。我很高兴你解决了这个问题！祝你好运顺便说一下，这是一个不错的解决方案（用于演示目的）