本地存储 "REMOVE" 按钮不起作用

Question

我在添加 it.The 后从购物车中删除商品时遇到问题，错误是：Uncaught TypeError: Cannot read 属性 'addEventListener' of null 这是我的脚本：

const addEspresso = () =>{
  var Espresso, esp, eObj;
Espresso = {
  name : "Espresso",
  type : "strong",
  imgSrc : "images/c7.png"
};

localStorage.setItem("Espresso", JSON.stringify(Espresso));


esp = localStorage.getItem("Espresso");
eObj = JSON.parse(esp);



let espresso = "";
espresso += `
         <div class="productDiv">
         <p>${eObj.name}</p> 
         <p>${eObj.type}</p>
         <img src="${eObj.imgSrc}">
         <button onclick="removeCI()"id = "remove">REMOVE</button>
         </div>
         `
         

          

document.getElementById("productList").innerHTML = espresso
}

const remove = document.getElementById("remove");

const removeI = (e) =>{
  var clicked = e.target;
  clicked.parentElement.remove();
}
const removeCI = () =>{
  remove.addEventListener("click", removeI)
}

现在html

<div id = productList>

</div>

<div class="coffeeT">
      <button id="espAdd"onclick="addEspresso()">Add</button>
    </div>

另外，如果有人能解释如何将产品添加到本地存储超过 1 次，那就太好了！期待谢谢！

Answer 1

const remove = document.getElementById("remove");
if (remove) {
    const removeI = (e) => {
        var clicked = e.target;
        clicked.parentElement.remove();
    }
    if (removeI ) {
        const removeCI = () => {
            remove.addEventListener("click", removeI, false)
        }
    }
}

请检查这个

Answer 2

您正在设置一个带有 ID 的按钮（要删除），但是当您添加多于一种浓缩咖啡时，您会有多个具有相同 ID 的按钮。那会引起问题。相反，使用类名：

   <button class="btn-remove">REMOVE</button>

我们需要用一些东西来跟踪这些项目，索引怎么样。 data-index 属性将在需要删除时帮助我们

eObj.forEach((item,i) => {  // item is the item, i is the index
      espresso += `
             <div class="productDiv" data-index="${i}">

然后创建一个事件侦听器，它将知道何时单击了删除按钮，并采取相应的行动：

 document.addEventListener('click', function(e) {
  if (e.target.classList.contains('btn-remove')) {
    // before removing, lets get the data-index value so we can remove the right one from localStorage
    let index = e.target.closest('.productDiv').dataset.index
    e.target.closest('.productDiv').remove();
    // adjust localStorage
    let eObj = JSON.parse(localStorage.getItem("Espresso"));
    eObj.splice(index,1)
    localStorage.setItem("Espresso", JSON.stringify(eObj));
  }
 })

完整代码：

const addEspresso = () => {
  let Espresso, esp, eObj;
  Espresso = {
    name: "Espresso",
    type: "strong",
    imgSrc: "images/c7.png"
  };

  // get the existing localStorage first
  esp = localStorage.getItem("Espresso");
  if (!esp) eObj = [];
  else eObj = JSON.parse(esp);
  // it should be an array or create one if empty
  eObj.push(Espresso)
  // add eObj to localStorage
  localStorage.setItem("Espresso", JSON.stringify(eObj));

  let espresso = "";
  eObj.forEach((item,i) => {  // item is the item, i is the index
  espresso += `
         <div class="productDiv" data-index="${i}">
         <p>${eObj.name}</p> 
         <p>${eObj.type}</p>
         <img src="${eObj.imgSrc}">
         <button class="btn-remove">REMOVE</button>
         </div>
        `
   });
  document.getElementById("productList").innerHTML = espresso
}

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('btn-remove')) {
    // before removing, lets get the data-index value so we can remove the right one from localStorage
    let index = e.target.closest('.productDiv').dataset.index
    e.target.closest('.productDiv').remove();
    // adjust localStorage
    let eObj = JSON.parse(localStorage.getItem("Espresso"));
    eObj.splice(index,1)
    localStorage.setItem("Espresso", JSON.stringify(eObj));
  }
})

本地存储 "REMOVE" 按钮不起作用

Local storage "REMOVE" button is not working

javascript

arrays

json

e-commerce