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

Posted 2023-03-16

【中文标题】如何让 splice() 方法在我的待办事项列表中工作？

【英文标题】：How do I get the splice() method to work in my todo list?

【发布时间】：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();

【参考方案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 块。