Todo List 專案–刪除功能的實作

在昨天完成了基本的新增功能後，今天我要實現刪除待辦事項的功能。每一個新增的待辦事項都會附上一個「刪除」按鈕，使用者點擊該按鈕後，可以將該待辦事項從清單中移除。

首先，修改addItem函數，讓每個待辦事項旁邊都生成一個刪除按鈕。這裡使用 JavaScript來動態生成按鈕並綁定刪除事件：

function addItem(text) {
    const li = document.createElement("li");
    li.textContent = text;

    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "刪除";
    deleteBtn.classList.add("delete-btn");

    deleteBtn.addEventListener("click", function() {
        li.remove();  // 移除該待辦事項
    });

    li.appendChild(deleteBtn);  // 將刪除按鈕添加到 li
    document.getElementById("todo-list").appendChild(li);
}

這段程式碼中，deleteBtn是一個動態生成的刪除按鈕，當按鈕被點擊時，會觸發li.remove()，將該待辦事項從頁面上移除。

現在，每個待辦事項都可以被單獨刪除，這使得我們的Todo List更加完整，提供了更好的用戶體驗。