大家好,我创建了网站的电子商务部分,您能帮我从本地存储中删除元素吗,我不想创建多个函数来删除每个元素,但仍然没有任何效果,请帮帮我
>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
}
})
答案 0 :(得分:0)
.parentElement 将返回 DOM 元素而不是文本。您可以在它之后进行一些解析或检查其中是否有特定的 p
元素。
您的第一个 p
孩子将持有文本 Espresso
。您可以使用 .textContent 获取它。这是您保存在存储中的密钥。
localStorage.removeItem(e.target.parentElement.querySelector('p').textContent);