使用 vanilla JavaScript 从 DOM 和本地存储中删除输入

Question

我正在用原生 JavaScript 创建一个 ToDo 应用。

我的目标是在单击相应的“X”按钮时能够从本地存储中删除输入数据。

到目前为止，当您单击 X 按钮时，使用我创建的此功能从 DOM 中删除了相应的输入字段和复选框 -

function removeToDoInput(button, input1, input2, input3) {
    if (allToDoInputs.length > 2) {
        button.addEventListener("click", () => {
            toDoInputContainer.removeChild(input1);
            toDoInputContainer.removeChild(input2);
            toDoInputContainer.removeChild(input3);
            for (let toDoInput = 0; toDoInput < allToDoInputs.length; toDoInput++) {
                for (let i = 0; i < localStorage.length; i++) {
                    localStorage.removeItem("ToDo " + toDoInput);
                    console.log("test");
                }
            }
        })
    }
}

这很好用。但就像我提到的，我还需要从本地存储中删除相应的输入数据。

这是“待办事项”按钮功能。你会注意到 removeToDoInput 被调用了，我认为这不是很好 -

function createToDoInput() {
    const newToDoInputCheckbox = document.createElement("INPUT");
    newToDoInputCheckbox.setAttribute("type", "checkbox");
    const newToDoInput = document.createElement("INPUT");
    const newXBtn = document.createElement("SPAN");

    toDoInputContainer.appendChild(newToDoInputCheckbox);
    toDoInputContainer.appendChild(newToDoInput);
    toDoInputContainer.appendChild(newXBtn);

    newToDoInputCheckbox.classList.add("checkbox");
    newToDoInput.classList.add("to-do-input");
    newXBtn.classList.add("X");

    newXBtn.innerHTML = "X";

    newXBtn.addEventListener("click", removeToDoInput(newXBtn, newToDoInputCheckbox, newToDoInput, newXBtn));
}

这里是保存按钮功能-

function saveToDoInputs() {
    localStorage.setItem("Title", toDoListTitle.value.trim());
    
        for (let toDoInput = 0; toDoInput < allToDoInputs.length; toDoInput++) {
            if (createToDoInput) {
                localStorage.setItem("ToDo " + toDoInput, allToDoInputs[toDoInput].value.trim());
            }
    }
}

我提到的最后两个函数都通过点击事件监听器附加到按钮上。

如何从本地存储和 DOM 中删除输入？

Answer 1

这是不正确的，将在您分配事件处理程序时立即调用

newXBtn.addEventListener("click", removeToDoInput(newXBtn, newToDoInputCheckbox, newToDoInput, newXBtn));

你需要

newXBtn.addEventListener("click", function() { removeToDoInput(newXBtn, newToDoInputCheckbox, newToDoInput, newXBtn)});

或类似

我已经重新设计了你的代码，现在它

• 将元素包装在自己的容器中
• 代表点击并切换到列表容器
• 使用相对寻址（最近）
• 为待办事项提供唯一 ID 并将其存储在对象中
• 加载时从本地存储中检索对象
• 更改时将对象添加到 localStorage

我还添加了一个全选并删除所选

注意我已将 localStorage 交互注释掉，因为 stacksn-ps 不允许访问 localStorage。只需在您的页面上取消注释即可

let todos = {};
// const saveTodos = localStorage.getItem("ToDo");
// if (saveTodos) todos = JSON.parse(saveTodos);

const toDoInputContainer = document.getElementById("toDoInputContainer");
const toggleSelDel = () => {
  document.getElementById("seldel").classList.toggle("hide",Object.keys(todos).length===0); // show if there are actual entries - we can toggle on existense of checkboxes instead
}
const saveAndToggle = (id,why) => {
  // localStorage.setItem("ToDo",JSON.stringify(todos));
  console.log(id, why);
  toggleSelDel()
};
const saveTodo = (id, text) => {
  todos[id] = text;
  saveAndToggle(id,"added")
};
const removeTodo = id => {
  if (todos[id]) {
    delete todos[id];
  }
  saveAndToggle(id,"deleted"); // toggle anyway
};

function createToDoInput() {
  const todoContainer = document.createElement("div");
  todoContainer.id = 'todo' + new Date().getTime(); // unique ID
  const newToDoInputCheckbox = document.createElement("INPUT");
  newToDoInputCheckbox.setAttribute("type", "checkbox");
  const newToDoInput = document.createElement("INPUT");
  const newXBtn = document.createElement("SPAN");

  todoContainer.appendChild(newToDoInputCheckbox);
  todoContainer.appendChild(newToDoInput);
  todoContainer.appendChild(newXBtn);

  newToDoInputCheckbox.classList.add("checkbox");
  newToDoInput.classList.add("to-do-input");
  newXBtn.classList.add("X");
  newXBtn.innerHTML = "X";
  toDoInputContainer.appendChild(todoContainer);
}

toDoInputContainer.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("X")) {
    const parent = tgt.closest("div")
    removeTodo(parent.id);
    parent.remove();
  }
});
toDoInputContainer.addEventListener("change", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("to-do-input")) {
    const id = tgt.closest("div").id;
    if (tgt.value === "") removeTodo(id);
    else saveTodo(id, tgt.value);
  }
});

document.getElementById("add").addEventListener("click", createToDoInput);

toggleSelDel(); // possibly show the select all button

document.getElementById("selAll").addEventListener("click", function() {
  const checked = this.checked;
  [...toDoInputContainer.querySelectorAll("[type=checkbox]")].forEach(chk => chk.checked = checked)
});

document.getElementById("delAll").addEventListener("click", function() {
  [...toDoInputContainer.querySelectorAll("[type=checkbox]:checked")].forEach(chk => {
    const parent = chk.closest("div");
    removeTodo(parent.id);
    parent.remove();
  });
});

.hide { display: none; }

<button id="add">Add</button>
<div id="seldel" class="hide"><label>Select all<input type="checkbox" id="selAll"/></label><button type="button" id="delAll">Delete selected</button></div>
<div id="toDoInputContainer"></div>