Javascript Can'；t删除本地存储元素_Javascript_Local Storage_Dom Events

Javascript Can'；t删除本地存储元素

javascript

Javascript Can'；t删除本地存储元素,javascript,local-storage,dom-events,Javascript,Local Storage,Dom Events,我有一个简单的本地存储应用程序。在我的应用程序中，用户可以创建包含新任务的无序列表。此应用程序中的最后一个元素是本地存储。我对此功能有问题在将项目保存到localstorage之前，我可以使用按钮删除它们。我不知道为什么，但它在保存元素后不起作用你知道我该怎么修吗我的代码： const first=document.getElementById（“first”）； const second=document.getElementById（“second”）；函数addList（e）{

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

在将项目保存到

localstorage

之前，我可以使用按钮删除它们。我不知道为什么，但它在保存元素后不起作用

你知道我该怎么修吗

我的代码：

const first=document.getElementById（“first”）；
const second=document.getElementById（“second”）；
函数addList（e）{
const newElement=document.createElement（“li”）；
newElement.innerHTML=first.value+second.value；
}
newElement.innerHTML+=“X”；
ul.appendChild（新元素）；
store（）；
newElement.querySelector（“按钮”）.addEventListener（“单击”，删除元素）；
}
函数删除元素（e）{
e、 target.parentNode.remove（）；
}
函数存储（）{
window.localStorage.myitems=ul.innerHTML；
}
函数getValues（）{
让storedValues=window.localStorage.myitems；
if（存储值）{
ul.innerHTML=存储值；
ul.查询选择器（“按钮”）。添加事件列表器（“单击”，删除元素）；
}
}
getValues（）

添加任务

看起来您的代码中缺少了一些小东西。从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>


添加任务

函数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+=“X”；
document.getElementById（“列表”）.appendChild（新元素）；
store（）；
newElement.querySelector（“按钮”）.addEventListener（“单击”，删除元素）；
}
函数删除元素（e）{
e、 target.parentNode.remove（）；
store（）；
}
函数存储（）{
window.localStorage[“myitems”]=document.getElementById（“list”）.innerHTML；
}
函数getValues（）{
让storedValues=window.localStorage[“myitems”]；
if（存储值）{
设ul=document.getElementById（“列表”）；
ul.innerHTML=存储值；
对于（i=0；i
首先，代码中的花括号似乎不正确。感谢您的帮助和所有信息！现在，当我尝试删除我的项目时，出现了以下错误：ul.childNodes[I].querySelector不是一个函数
，不幸的是，我编辑了一些错误，所以你有完整的工作代码。我想你可能把它弄坏了。我建议将您的初始getValues（）调用包装在onReady函数中。