2 回答

TA貢獻1877條經驗 獲得超1個贊
你很接近,你只需要做一些改變就可以讓它工作:
添加deleteTaskButton作為列表項的子項newTask。您將其添加為同級元素,但如果我們將其設為子元素,則會將其直接與元素相關聯li,因此我們可以輕松找到li您要刪除的元素:
function taskList() {
[...]
document.getElementById("taskLister").appendChild(newTask);
newTask.appendChild(deleteTaskButton); // 1. add to the new task li
[...]
}
現在在您的removeTask函數中,傳入的單擊按鈕是li您選擇刪除的按鈕的子元素,因此您只需要獲取其父元素并將其刪除:
function removeTask(i) {
let deleteTask = i.target.parentElement;
deleteTask.remove();
}
這就是您所需要的!

TA貢獻1876條經驗 獲得超6個贊
工作示例:
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;
添加回答
舉報