Question

所以我对 JavaScript 非常陌生，我正在尝试制作一个待办事项列表，您可以在其中添加新任务并在每次单击提交和删除按钮时删除它们。到目前为止，我做得很好，直到遇到删除按钮。当我点击它时，它不会从对象中删除实际元素。我认为错误是在代码中的某个地方，我使用 map 遍历数组并为每个任务创建了一个新的 id，但我一直无法弄清楚在哪里......

如果你们能找到错误的地方，我真的很感激......！

//empty array:
let todoList = [];

//get elements from HTML:
let newTask = document.querySelector("#addTask");
let form = document.querySelector(".form");
let list = document.querySelector("#list");
let val = document.querySelector("#priority");

//Event Listeners:
form.addEventListener("submit", getData);
list.addEventListener("click", deleteTask);

//Functions:
//1. get the data from the form:
function getData(e) {
  e.preventDefault();
  //create a new object:
  const task = {
    name: newTask.value,
    p: val.value
  };
  //clean input
  newTask.value = "";

  //add net task to todoList array:
  todoList = [...todoList, task];

  //add id to each item:
  let i = 0;
  todoList.map((task) => {
    task["id"] = i + 1;
    i++;
  });

  toHtml(todoList);
}

//2. add the task to HTML:
function toHtml(data) {
  //clean the HTML:
  while (list.firstChild) {
    list.removeChild(list.firstChild);
  }

  todoList.forEach((item) => {
    const { name, p, id } = item;
    let div = document.createElement("div");
    div.classList.add("new-task");
    div.innerHTML = `<p>${name}<span> (${p})</span></p> 
                     <a href="#" class="delete-btn" id=${id}>X</a>`;
    list.appendChild(div);
  });
}

//Delete data from Form:
function deleteTask(e) {
  e.preventDefault();
  if (e.target.classList.contains("delete-btn")) {
    let deleteId = e.target.getAttribute("id");
    console.log(deleteId);
    todoList = todoList.filter((task) => {
      return task.id !== deleteId;
    });
    console.log(todoList);
  }
}

body {
  font-family: sans-serif;
}

.form {
margin: 0 auto; 

.list {
  width: 500px;
  padding: 10px 20px;
  margin: 10px auto;
  border: 1px dotted black;
}

.new-task {
  display: flex;
  align-items: center;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h1>Todo list</h1>

    <form class="form">
      <label for="addTask">Add a task</label>
      <input type="text" class="addTask" id="addTask" />
      <select name="priority" id="priority">
        <option value="p1" id="p1">P1</option>
        <option value="p2" id="p2">P2</option>
        <option value="p3" id="p3">P3</option>
      </select>
      <input type="submit" value="Add" id="submit" />
    </form>

    <div class="list" id="list"></div>

    <script src="src/index.js"></script>
  </body>
</html>

无法从待办事项列表中删除任务

0 个答案: