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

Question

所以我正在使用 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 也可以！）

Answer 1

编辑：

APIgetElementsByClassNamereturns一个集合dom，你得绑定监听器才行dom , 例如

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

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

这里有几条知识。

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

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

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

Answer 2

最好在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);
}

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

Deleting localstorage element via multiple buttons

html

javascript

event-handling

local-storage