如何在 localstorage 中添加和删除关键组件？

Question

I got a big problem right here.I need the product to be added as an "Espresso" key child,and the key child to be removed on click of the "REMOVE button".Here goes my code:

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

Here goes an example of what I want

Answer 1

You are trying to access the child text (first p tag) after removing it's parent (.productDiv). Do this instead:

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