我复制了与您完全相同的代码，并传递了一个伪造的数组来建模待办事项，就像您已经做的那样
const todos = [{
id: 1,
title: 'title#1',
description: 'description#1'
},
{
id: 2,
title: 'title#2',
description: 'description#2'
}];
为了与您的策略保持一致，在创建待办事项的逻辑中，我添加了使用相应的待办事项 id 设置每个删除按钮的
data-iddeleteDonedivclosestconst todos = [{
id: 1,
title: 'title#1',
description: 'description#1'
},
{
id: 2,
title: 'title#2',
description: 'description#2'
}];
getTodoscallBack(todos);
function deleteDone(id) {
console.log("Deleted todo ID:", id);
//retrieves the delete button holding the data-id attribute passed
const delButton = document.querySelector(`[data-id="${id}"`);
//retrieves the element containing that button
const todoContainer = delButton.closest('div');
//removes the whole div containing the todo
todoContainer.remove();
}
function deleteTodo(id) {
/*
fetch("http://localhost:3000/todos/" + id, {
method: "DELETE",
headers: {
"Content-Type": "application/json"
}
}).then(deleteDone)
*/
deleteDone(id);
}
function getTodoscallBack(data) {
console.log(data);
var parentElement = document.getElementById("mainArea");
// parentElement.innerHTML = JSON.stringify(data);
for (var i = 0; i < data.length; ++i) {
var childElement = document.createElement("div");
var grandChildren1 = document.createElement("span");
grandChildren1.innerHTML = data[i].title;
var grandChildren2 = document.createElement("span");
grandChildren2.innerHTML = data[i].description;
var grandChildren3 = document.createElement("button");
grandChildren3.innerHTML = "Delete";
grandChildren3.setAttribute("onclick", "deleteTodo(" + data[i].id + ")");
//HERE I set the data-id attribute value as data[i].id
grandChildren2.dataset.id = data[i].id;
childElement.appendChild(grandChildren1);
childElement.appendChild(grandChildren2);
childElement.appendChild(grandChildren3);
parentElement.appendChild(childElement);
}
}
function callbackFn2(res) {
res.json().then(getTodoscallBack);
}
function getData() {
fetch("http://localhost:3000/todos", {
method: "GET",
}).then(callbackFn2);
}
getData();
function parsedResponse(data) {
console.log(data);
var parentElement = document.getElementById("mainArea");
var childElement = document.createElement("div");
var grandChildren1 = document.createElement("span");
grandChildren1.innerHTML = data.title;
var grandChildren2 = document.createElement("span");
grandChildren2.innerHTML = data.description;
var grandChildren3 = document.createElement("button");
grandChildren3.innerHTML = "Delete";
childElement.appendChild(grandChildren1);
childElement.appendChild(grandChildren2);
childElement.appendChild(grandChildren3);
parentElement.appendChild(childElement);
}
function callback(res) {
res.json().then(parsedResponse);
}
function onPress() {
var title = document.getElementById("title").value;
var description = document.getElementById("description").value;
console.log(title, "\n", description);
fetch("http://localhost:3000/todos", {
method: "POST",
body: JSON.stringify({
title: title,
description: description
}),
headers: {
"Content-Type": "application/json"
}
}).then(callback);
}<body>
Todo title
<input type="text" id="title">
<br><br> Todo description
<input type="text" id="description">
<br><br>
<button onclick="onPress()">send todo</button>
<div id="mainArea">
</div>
</body>