如何让 splice() 方法在我的待办事项列表中工作？答案

【问题标题】：How do I get the splice() method to work in my todo list?如何让 splice() 方法在我的待办事项列表中工作？
【发布时间】：2022-01-16 12:04:18
【问题描述】：

我正在构建一个简单的待办事项列表，并将使用拼接方法从列表中删除项目。我无法让它工作。我将拼接的项目带到控制台，因此我的删除按钮和我的删除功能之间的“连接”似乎有效。我也尝试了 slice 方法并且有效，但由于某种原因，splice 方法不起作用。下面是我用来将新项目推送到班级的数组、为新待办事项创建 HTML 的函数和删除项目函数。知道为什么拼接方法不起作用吗？

//ARRAY FOR NEW TODO ITEMS
let newTodo: Todo[] = [];

// FUNCTION THAT CREATES THE HTML FOR THE NEW TODO ITEM

    let doneBtn = document.createElement("button");

function htmltask() {
  let taskDiv = document.createElement("div");

  taskDiv.innerHTML = "";

  for (let i = 0; i < newTodo.length; i++) {
    taskDiv.className = "taskDiv";
    taskDiv.innerHTML = newTodo[i].todoItem;

    let btnContainer = document.createElement("div");
    btnContainer.className = "btnContainer";

    // REMOVEBTN //
    let removeBtn = document.createElement("button");
    removeBtn.innerHTML = "REMOVE";
    removeBtn.addEventListener("click", (e) => {
      remove(e, i);
    });

    // DONEBTN //
    let doneBtn = document.createElement("button");
    doneBtn.innerHTML = "DONE";
    doneBtn.className = "doneBtn";

    newTaskDiv.appendChild(taskDiv);
    taskDiv.appendChild(btnContainer);
    btnContainer.appendChild(doneBtn);
    btnContainer.appendChild(removeBtn);
  }

  localStorage.setItem("newTodo", JSON.stringify(newTodo));
}

// FUNCTION TO REMOVE ITEMS
function remove(e: Event, i: number) {
  newTodo.splice(i, 1);
  htmltask();
}

【问题讨论】：

标签： javascript splice

【解决方案1】：

稍微修改了你的代码，现在可以了：

<div>
  <button onClick="htmltask()">Action!</button>
  <div id="tasks" />
</div>

type Todo = { todoItem: string }

let newTodo: Todo[] = [
  { todoItem: 'Eat'},
  { todoItem: 'Sleep'},
  { todoItem: 'Code'},
];

function htmltask() {
  const allTasksDiv = document.getElementById("tasks");
  allTasksDiv.innerHTML = "";

  for (let i = 0; i < newTodo.length; i++) {
    const taskDiv = document.createElement("div");
    taskDiv.className = "taskDiv";
    taskDiv.innerText = newTodo[i].todoItem;

    const btnContainer = document.createElement("div");
    btnContainer.className = "btnContainer";

    // REMOVEBTN //
    const removeBtn = document.createElement("button");
    removeBtn.innerText = "REMOVE";
    removeBtn.addEventListener("click", (e) => remove(e, i));

    // DONEBTN //
    let doneBtn = document.createElement("button");
    doneBtn.innerText = "DONE";
    doneBtn.className = "doneBtn";

    btnContainer.appendChild(doneBtn);
    btnContainer.appendChild(removeBtn);
    taskDiv.appendChild(btnContainer);
    allTasksDiv.appendChild(taskDiv);
  }

  localStorage.setItem("newTodo", JSON.stringify(newTodo));
}

function remove(e: Event, i: number) {
  newTodo.splice(i, 1);
  htmltask();
}

虽然我建议以另一种方式删除项目：搜索项目的 div 并将其删除。而不是从头开始重新创建整个 todos 块。

【讨论】：