Javascript localstorage中每个项目的按钮

如何为localstorage中的每个项目添加按钮以删除该项目？ 我有来自localstorage的setItem和getItem的代码，但我不知道如何为每个项目添加一个按钮或x来删除它

2020-03-01三月十日

2020-04-01四月十日
看起来像是将项目添加到卡或从卡中删除项目。 请帮帮我

jQuery UI日期选择器-默认功能
$（函数（）{
$（“#inpkey”）.datepicker（）；
});
字段集{
边缘底部：20px；
}
输入{
填充：7px；
高度：40px；
}
拯救
const inpkey=document.getElementById（“inpkey”）；
const inpavv=document.getElementById（“inpvalue”）；
const spara=document.getElementById（“btninsert”）；
const output=document.getElementById（“输出”）；
spara.onclick=函数（）{
const key=inpkey.value；
常量值=inpavv.value；
控制台日志（键）；
console.log（值）；
if（键和值）{
setItem（键、值）；
location.reload（）；
}
};
for（设i=0；i`；
}

类似这样的内容：注意，JSFIDLE在删除最后一个元素时遇到了问题。可能是我在代码中忽略的东西。祝你好运

const setup=（）=>{
const spara=document.querySelector（“#btn插入”）；
const output=document.querySelector（“#output”）；
spara.addEventListener（'click'，addMyEntry）；
output.addEventListener（'click'，removeMentry）；
输入（输出）；
};
const insertEntries=（target）=>target.insertAdjacentHTML（'beforeend'，loadEntryHTML（））；
常量loadEntryHTML=（）=>{
让html=''；
if（localStorage.length！==0）{
for（设i=0；i`${key}:${value}
`；
const addMyEntry=（）=>{
const inpkey=document.querySelector（'#inpkey'）；
const inpavv=document.querySelector（'#inpvalue'）；
const key=inpkey.value；
常量值=inpavv.value；
if（键和值）{
setItem（键、值）；
const output=document.querySelector（“#output”）；
insertAdjacentHTML（'beforeend'，createEntryHTML（key，value））；
}
};
const removeMentry=（事件）=>{
const target=event.target；
如果（target.nodeName=='A'）{
event.currentTarget.removeChild（target.parentNode）；
localStorage.removietem（target.dataset.key）；
}
};
//装载
window.addEventListener（“加载”，设置）
.lbl\u键{
右侧填充：1em；
}

拯救
动态构建元素的更好解决方案


const-app=document.getElementById（“app”）；
constlocalstorage=[1,2,3,4]；
for（让index=0；index


静态模板
.cart_项目{
边框：1px实心；
填充：20px 40px；
}
.十字架{
颜色：红色；
光标：指针；
}
我没有得到你想要在endOne中实现的东西，但是我不建议你重新加载页面。您可以轻松实现这一点，而无需重新加载。