Question

我想使用 JavaScript 和 localStorage 制作我自己的待办事项列表。写入输入并按下发送按钮后，项目将被添加并显示在屏幕上。项目旁边会出现一个删除按钮。但是我无法在按下删除按钮后删除它。

HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do list</title>
</head>

<body>

    <input id="inpKey" type="text">
    <input id="inpValue" type="text">
    <button type="button" id="add">Add</button>

    <div id="items"> </div>

</body>

<script src="app.js"></script>

</html>

JavaScript 代码：

const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const add = document.getElementById("add");
const items = document.getElementById("items");


add.onclick = function() {
    const key = inpKey.value;
    const value = inpValue.value;

    if (key && value) {
        localStorage.setItem(key, value);
        location.reload();
    }
};

for (let a = 0; a < localStorage.length; a++) {
    const key = localStorage.key(a);
    const value = localStorage.getItem(key);

    items.innerHTML += `${key}: ${value}` + "<button type='button' onclick='deleteItem()'>Delete</button><br>";
}

function deleteItem() {
    localStorage.removeItem();
    location.reload();
}

Answer 1

您缺少删除项目的键：

onclick='deleteItem(${key})'

然后

function deleteItem(key) {
    localStorage.removeItem(key);
}

Answer 2

用您的线路更改以下内容

items.innerHTML += `${key}: ${value} <button type='button' onclick='deleteItem(${key})'>Delete</button><br>`;

然后

function deleteItem(key) {
    localStorage.removeItem(key);
}

Answer 3

我添加了这个：

items.innerHTML += `${key}: ${value} <button type='button' onclick='deleteItem(${key})'>Delete</button><br>`;

还有这个

function deleteItem(key) {
    localStorage.removeItem(key);
}

就像回答一样，但是当我点击删除时，控制台显示：Uncaught ReferenceError: "key" is not defined at HTMLButtonElement.onclick (index.html:21)

带有 localStorage 的 JavaScript 待办事项列表

3 个答案: