无法删除本地存储元素

Question

我有一个简单的本地存储应用程序。在我的应用程序中，用户可以创建包含新任务的无序列表。此应用程序中的最后一个元素是本地存储。我对此功能有疑问。

在我保存 localstorage 中的项目之前，我可以使用按钮删除它们。不知道为什么，保存元素后就不行了

知道我该如何解决吗？

我的代码：

const first= document.getElementById("first");
const second= document.getElementById("second");

function addList(e) {
  const newElement = document.createElement("li");
  newElement.innerHTML = first.value + second.value;
}

newElement.innerHTML += "<button> X </button>";
ul.appendChild(newElement);
store();

newElement.querySelector("button").addEventListener("click", removeElement);
}

function removeElement(e) {
  e.target.parentNode.remove();
}


function store() {
  window.localStorage.myitems = ul.innerHTML;
}

function getValues() {
  let storedValues = window.localStorage.myitems;
  if(storedValues) {
    ul.innerHTML = storedValues;

    ul.querySelector("button").addEventListener("click", removeElement);
}
}
getValues();

<div class="container">
  <form>
    <input type="text" id="first" name="artist" placeholder="Artist" />
    <input type="text" id="second" name="title" placeholder="Song title" />
    <button type="button" onclick="addList(event)">Add task</button>
  </form>
</div>

<div class="li-elements">        
  <ul class="list"></ul>
</div>

Answer 1

看起来你只是在你的代码中遗漏了一些小东西。从 localStorage 加载时，您没有正确添加 removeElement 事件侦听器，并且您没有正确更新 localStorage。我已经更新了你的代码，所以它可以工作。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>




</head>
<body>
    <div class="container">
        <form>
            <input type="text" id="first" name="artist" placeholder="Artist" />
            <input type="text" id="second" name="title" placeholder="Song title" />
            <button type="button" onclick="addList(event)">Add task</button>
        </form>
    </div>

    <div class="li-elements">
        <ul id="list" class="list"></ul>
    </div>
    <script>
        function addList(e) {
            const first = document.getElementById("first");
            const second = document.getElementById("second");
            const newElement = document.createElement("li");
            newElement.innerHTML = first.value + second.value;
            newElement.innerHTML += "<button> X </button>";
            document.getElementById("list").appendChild(newElement);
            store();

            newElement.querySelector("button").addEventListener("click", removeElement);
        }

        function removeElement(e) {
            e.target.parentNode.remove();
            store();
        }


        function store() {
            window.localStorage["myitems"] = document.getElementById("list").innerHTML;
        }

        function getValues() {
            
            let storedValues = window.localStorage["myitems"];
            if (storedValues) {
                let ul = document.getElementById("list");
                ul.innerHTML = storedValues;
                for (i = 0; i < ul.childNodes.length; i++) {
                    ul.childNodes[i].querySelector("button").addEventListener("click", removeElement);
                }
            }
        }
        getValues();
    </script>
</body>
</html>

无法删除本地存储元素

Can't remove local storage elements

javascript

local-storage

dom-events