如何在 localstorage 中添加和刪除關鍵組件？

Question

我在這里遇到了一個大問題。我需要將產品添加為“Espresso”關鍵子項，並且在單擊“刪除按鈕”時要刪除關鍵子項。這是我的代碼：

let pList = document.getElementById("productList")

//Espresso

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 htmlEspresso = "";   htmlEspresso += `
         <div class="productDiv">
         <p>${eObj.name}</p> 
         <p>${eObj.type}</p>
         <img src="${eObj.imgSrc}">
         <button class="btn-remove">REMOVE</button>
         </div>
         `

  document.getElementById("productList").innerHTML += htmlEspresso 
}
document.addEventListener("click", function(e) {
  var btnR = document.getElementsByClassName("btn-remove");
  if (e.target.classList.contains("btn-remove")) {
    e.target.closest(".productDiv").remove();
    localStorage.removeItem(e.target.parentElement.querySelector('p').textContent);
  }
})

這是我想要的一個例子

Answer 1

您試圖在刪除其父級 (.productDiv) 后訪問子文本（第一個 p 標記）。 改為這樣做：

if (e.target.classList.contains("btn-remove")) {
     localStorage.removeItem(e.target.parentElement.querySelector('p').textContent);
     e.target.closest(".productDiv").remove(); 
}