无法从 LocalStorage 中删除项目

Question

大家好，我创建了网站的电子商务部分，请您帮我从本地存储中删除元素，我不想创建多个函数来删除每个元素，但仍然没有任何效果，请帮帮我

p>

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) - This does not work,I do not understand what to do with it
  }
})

Answer 1

.parentElement 将返回 DOM 元素而不是文本。您可以在它之后进行一些解析或检查其中的特定 p 元素。

您的第一个 p 孩子将持有文本 Espresso。您可以使用 .textContent 获取它。这是您保存在存储中的密钥。

localStorage.removeItem(e.target.parentElement.querySelector('p').textContent);