javascript - 为什么刷新后无法删除localStorage数据？

Question

我正在使用 javascript 制作待办事项列表，并且在刷新页面时不会丢失待办事项。但是刷新后，我的 li 项目上的 X 按钮不起作用，无法删除它。有什么理由？？？在我添加 localStorage 之前，它曾经能够删除项目：/

HTML：

        <div class="row">
                <input id="userInput" type="text" placeholder="New item..." maxlength="190"autofocus>
                <button id="enter" onclick="createListElement()">Add</button>
        </div>

        <div class="row" id="items">
            <div class="listItems col-12">
                <ul class="col-12 offset-0 col-sm-8 offset-sm-2">
                </ul>
            </div>
        </div>      

JS：

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);

    let arr = getTasks();

    arr.push(li.textContent);

    localStorage.setItem('tasks', JSON.stringify(arr));
}

function addListAfterKeypress(event) {
    if (input.value.length > 0 && event.which === 13) {
        createListElement();
        input.value = '';
    }
}

input.addEventListener("keypress", addListAfterKeypress);

function getTasks() {
    let tasks;
    if (localStorage.getItem('tasks') === null) {
        tasks = [];
    } else {
        tasks = JSON.parse(localStorage.getItem('tasks'));
    }
    return tasks;
}
window.addEventListener('DOMContentLoaded', () => {
    let arr = getTasks();
    let foo = '';
    arr.forEach(item => {
        foo += `<li>${item}<button>X</button></li>`;
    });

    ul.innerHTML = foo;

    var li = document.createElement("li"); 
    li.appendChild(document.createTextNode(input.value));
    input.value = "";
    var dBtn = document.createElement("button");
    dBtn.appendChild(document.createTextNode("X"));
    li.appendChild(dBtn);
    dBtn.addEventListener("click", deleteListItem);

    function deleteListItem(){
        li.classList.add("delete");
    }
});

function addListAfterClick(){
    if (inputLength() > 0) {
        createListElement();
    }
}

标签： javascripthtml