如何点击删除按钮用JavaScript从DOM删除指定TODO项及父div

在TODO项的删除函数中，希望通过给定的id删除指定的TODO项，但难以选中存储标题、描述和删除按钮的父div标签（该div是通过JavaScript发送请求动态添加的）。请问如何使用removeChild()删除对应id的删除按钮所属的div标签？

原代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO app</title>
</head>
 <script>

    function deleteDone(id) {
        console.log("Deleted todo ID:", id);
        // Delete the right todo from the list
        // You will need to give each todo an id, and that should be enough to remove it
       

    }
    function deleteTodo(id) {
        fetch("http://localhost:3000/todos/" + id, {
            method: "DELETE",
            headers: {
                "Content-Type": "application/json"
            }
        }).then(deleteDone)
    }


    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+")");
            
            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,"
",description);

        fetch("http://localhost:3000/todos",{
            method:"POST",
            body: JSON.stringify({
                title: title,
                description:description
            }),
            headers: {
                "Content-Type": "application/json"
            }
        }).then(callback);
    }


 </script>
<body>
    
    Todo title
    <input type="text" id="title"></input>
    <br><br>
    Todo description
    <input type="text" id="description"></input>
    <br><br>
    <button onclick="onPress()">send todo</button>
    <div id="mainArea">

    </div>
</body>
</html>

核心思路是给每个动态生成的TODO项div绑定与后端id关联的唯一标识，之后通过这个标识找到对应div，再利用父元素调用removeChild()移除它。

步骤1：给动态生成的TODO div添加唯一id #

在生成TODO项的两个函数（getTodoscallBack和parsedResponse）中，给创建的childElement设置id，格式建议用todo-{后端返回的id}，确保每个div唯一：

修改getTodoscallBack中的代码：

for(var i=0;i<data.length;++i){
    var childElement = document.createElement("div");
    // 新增：给todo div设置唯一id
    childElement.id = "todo-" + data[i].id;

    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+")");
    
    childElement.appendChild(grandChildren1);
    childElement.appendChild(grandChildren2);
    childElement.appendChild(grandChildren3);
    
    parentElement.appendChild(childElement);
}

修改parsedResponse中的代码（新增的TODO也要处理）：

function parsedResponse(data){
    console.log(data);
    var parentElement = document.getElementById("mainArea");
    var childElement = document.createElement("div");
    // 新增：给新增的todo div设置唯一id
    childElement.id = "todo-" + data.id;

    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";
    // 新增：给删除按钮绑定点击事件
    grandChildren3.setAttribute("onclick","deleteTodo("+data.id+")");
    
    childElement.appendChild(grandChildren1);
    childElement.appendChild(grandChildren2);
    childElement.appendChild(grandChildren3);
    
    parentElement.appendChild(childElement);
}

步骤2：实现deleteDone函数移除对应div #

在deleteDone函数中，通过id找到目标div，再获取它的父元素（mainArea），调用removeChild()移除：

function deleteDone(id) {
    console.log("Deleted todo ID:", id);
    // 找到对应的todo div
    const todoDiv = document.getElementById("todo-" + id);
    if (todoDiv) {
        // 获取父元素mainArea，调用removeChild移除目标div
        const mainArea = document.getElementById("mainArea");
        mainArea.removeChild(todoDiv);
    }
}

补充说明 #

如果不想依赖父元素调用removeChild()，也可以直接用todoDiv.remove()，这是更简洁的方式，但如果严格要求使用removeChild()，上述方法完全符合需求。

内容的提问来源于stack exchange，提问作者079_RISHABH