如何使用按鈕刪除通過 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

您已經接近了，您只需要進行一些更改即可使其正常工作：

1. 添加deleteTaskButton作為newTask列表項的子項。 您將其添加為兄弟，但如果我們將其設為子項，那么這會將其直接與li元素相關聯，因此我們可以輕松找到您要刪除的li ：

    function taskList() {
      [...]
      document.getElementById("taskLister").appendChild(newTask);
      newTask.appendChild(deleteTaskButton);  // 1. add to the new task li
      [...]
    }

2. 現在在您的removeTask函數中，傳入的單擊按鈕是您選擇刪除的li的子元素，因此您只需要獲取其父元素並將其刪除：

function removeTask(i) {
  let deleteTask = i.target.parentElement;
  deleteTask.remove();
}

這就是你所需要的！

工作示例：

 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.textContent = "Delete "+item; newTask.innerText = item; document.getElementById("taskLister").appendChild(newTask); newTask.appendChild(deleteTaskButton); /* 1. ADD BUTTON TO LI */ 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) { /* 2. THE BUTTON IS NOW A CHILD OF THE LI, SO DELETE ITS PARENT */ let deleteTask = i.target.parentElement; deleteTask.remove(); }

 <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>

另外僅供參考，要將文本添加到按鈕，請使用textContent而不是innertext ，例如

deleteTaskButton.textContent = "Delete "+item;