如何使用按钮删除通过 javascript 添加的“待办事项”列表项

Question

我正在尝试创建一个删除按钮来删除相应的列表项。我试过尝试创建一个 for 循环来遍历列表项，但是没有要开始的项，因此没有要遍历的数组。不确定我的逻辑是否正确，或者我忽略了什么。

这是我的代码，我需要做什么才能使删除按钮起作用？

<div class="container">

    <h1>TO DO LIST</h1>

    <form id="taskForm">

      <input id="taskInput"></input>

      <button type="button" id="taskButton">Click Here</button>  

     </form>

     <ul id="taskLister"></ul>

</div>

<script>

    let button = document.getElementById("taskButton");

    button.addEventListener('click', () => taskList());

    function taskList() {

      let item = document.getElementById("taskInput").value;

      let newTask = document.createElement("li");

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

      deleteTaskButton.innertext = item;

      newTask.innerText = item;

      document.getElementById("taskLister").appendChild(newTask);

      document.getElementById("taskLister").appendChild(deleteTaskButton);

      if(markTaskComplete) {

        newTask.addEventListener('click', (e) => markTaskComplete(e));

        deleteTaskButton.addEventListener('click', (i) => removeTask(i));

      }

    }

    function markTaskComplete(e) {

      let strikeThrough = e.target;

      strikeThrough.style.textDecoration = "line-through";

    }

    function removeTask(i) {

      let deleteTask = i.target;

      deleteTask.parentNode.removeChild(li);

    }

Answer 1

你很接近，你只需要做一些改变就可以让它工作：添加deleteTaskButton作为列表项的子项newTask。您将其添加为同级元素，但如果我们将其设为子元素，则会将其直接与元素相关联li，因此我们可以轻松找到li您要删除的元素：&nbsp; &nbsp; function taskList() {&nbsp; &nbsp; &nbsp; [...]&nbsp; &nbsp; &nbsp; document.getElementById("taskLister").appendChild(newTask);&nbsp; &nbsp; &nbsp; newTask.appendChild(deleteTaskButton);&nbsp; // 1. add to the new task li&nbsp; &nbsp; &nbsp; [...]&nbsp; &nbsp; }现在在您的removeTask函数中，传入的单击按钮是li您选择删除的按钮的子元素，因此您只需要获取其父元素并将其删除：function removeTask(i) {&nbsp; let deleteTask = i.target.parentElement;&nbsp; deleteTask.remove();}这就是您所需要的！

Answer 2

工作示例：let button = document.getElementById("taskButton");button.addEventListener('click', () => taskList());function taskList() {&nbsp; let item = document.getElementById("taskInput").value;&nbsp; let newTask = document.createElement("li");&nbsp; let deleteTaskButton = document.createElement("button");&nbsp; deleteTaskButton.textContent = "Delete "+item;&nbsp; newTask.innerText = item;&nbsp; document.getElementById("taskLister").appendChild(newTask);&nbsp; newTask.appendChild(deleteTaskButton);&nbsp; &nbsp; /* 1. ADD BUTTON TO LI */&nbsp; if (markTaskComplete) {&nbsp; &nbsp; newTask.addEventListener('click', (e) => markTaskComplete(e));&nbsp; &nbsp; deleteTaskButton.addEventListener('click', (i) => removeTask(i));&nbsp; }}function markTaskComplete(e) {&nbsp; let strikeThrough = e.target;&nbsp; strikeThrough.style.textDecoration = "line-through";}function removeTask(i) {&nbsp; /* 2. THE BUTTON IS NOW A CHILD OF THE LI, SO DELETE ITS PARENT */&nbsp; let deleteTask = i.target.parentElement;&nbsp; deleteTask.remove();}<div class="container">&nbsp; <h1>TO DO LIST</h1>&nbsp; <form id="taskForm">&nbsp; &nbsp; <input id="taskInput"></input>&nbsp; &nbsp; <button type="button" id="taskButton">Click Here</button>&nbsp; </form>&nbsp; <ul id="taskLister"></ul></div>另外仅供参考，要将文本添加到按钮，您可以使用textContent而不是innertext，例如deleteTaskButton.textContent = "Delete "+item;