双击而不是单击；重新加载（）

Question

我正在编写一个待办事项列表，我想从屏幕和本地存储中删除添加到列表中的项目。这是JS代码：

function delete_btn() {
    let all_buttons = document.querySelectorAll(".remove_item");
    all_buttons.forEach((db, i) => {
        db.addEventListener('click', () => {
            del(i);
        })

        function del(i) {
            input_array.splice(i, 1);
            localStorage.setItem("items", JSON.stringify(input_array));
            console.log(localStorage);
            location.reload();

        }}
    )}

我的第一个问题：这些项目仅在第二次单击时才会被删除，我无法弄清楚是什么触发了双击以及如何将其更改为单击？

我的第二个问题：在我的代码中，待办事项列表位于第二部分，在页面加载时隐藏（我使用“下一步”和“后退”按钮在各部分之间切换）。当我运行上面的代码来删除待办事项条目时，页面会重新加载以更新屏幕上的待办事项列表，并在重新加载后返回到第一部分。如何在不重新加载页面的情况下更新待办事项列表，或者如何重新加载页面以更新待办事项列表并停留在第二部分（待办事项部分）？ 谢谢！

我找到了这个解决方案Refresh Part of Page (div)用于使用JQuery重新加载，但我想知道是否有一个简单的JS解决方案？

Answer 1

在您的

delete_btn

函数中，您仅在所有

.remove_item

元素上设置事件侦听器。事件监听器实际上并没有被调用。

第二次单击按钮时，按钮已经附加了一个事件侦听器（来自上一次调用），因此会调用该事件侦听器并删除您的待办事项。

关于页面重新加载，您可以在

localStorage

中添加另一个键来跟踪第二部分是否可见，并在加载时使用它来设置页面。