通过多个按钮删除本地存储元素答案

【问题标题】：Deleting localstorage element via multiple buttons通过多个按钮删除本地存储元素
【发布时间】：2020-01-23 03:23:34
【问题描述】：

所以我使用 localStorage 将按钮添加到我的 html 页面。单击按钮时，我希望删除相应的 localStorage 条目。

到目前为止我的代码：

for(let i=0;i<localStorage.length;i++)
    {
        var rem=document.createElement("button");
        rem.innerHTML='<i class="fa fa-trash-o" aria-hidden="true"></i>';
        rem.setAttribute('background-color','white');
        rem.setAttribute('id',localStorage.key(i));
        rem.setAttribute('class','delbuttons');
        document.body.appendChild(rem);
    }

因此，如果单击具有特定 id 的按钮，我希望删除 localStorage 中的相应键。我想要所有按钮的onclick。目前我想到的是：

var delb=document.getElementsByClassName("delbuttons").addEventListener("click",del);

function del()
{
    localStorage.removeItem('key');
}

我被困在这里，我不知道如何继续。我可以使用其他方法（jQuery 也可以！）

【问题讨论】：

标签： javascript html event-handling local-storage

【解决方案1】：

最好在loop中附加onclick事件：

rem.setAttribute("onclick","del(this)");

及功能：

function del(x)
{
    localStorage.removeItem(x.id);
}

错误部分：您正在尝试在getElementsByTagName 返回的HTMLCollection 上添加事件，这是不可能的。

您应该在HTMLCollection 中的每个元素上添加事件。例如。

var delbs=document.getElementsByClassName("delbuttons");
for(var button of delbs){
    button.addEventListener("click",del(this));
}
function del(btm)
{
    localStorage.removeItem(btn.id);
}

【讨论】：

【解决方案2】：

编辑：

APIgetElementsByClassName返回一个dom的集合，你必须在真实的dom上绑定监听器，例如

Array.from(document.getElementsByClassName('delbuttons')).forEach(btn => btn.addEventListener('click', del))

您似乎被这个话题卡住了：如何获取现在被点击的按钮的 id ？

这里有几条知识。

事件监听器（在你的代码中是函数'del'）将接收一个事件对象作为参数。其中一个重要的属性是 target 指示确切的 dom（在您的代码中是您刚刚单击的按钮）。
dom API getAttribute 访问定义的属性，例如按钮的id

所以我们最终得到了一个新版本的 del listener。

    function del(event) {
      var id = event.target.getAttribute('id'); //or. var id = event.target.id
      localStorage.removeItem(id);
    }

【讨论】：

var delb=document.getElementsByClassName("delbuttons").addEventListener("click",del);这部分报错