如何修改此代码，以便可以删除每个表单元格

How can I modify this code so that each table cell can be deleted?

本文关键字：删除 单元格 表单 何修改 修改 代码      更新时间：2023-09-26

我有一个简单的任务管理器，用户可以在其中记录"toDos"，但是，我不知道如何使它使用户可以删除已完成的任务。有什么建议吗？

var toDoSpace = document.getElementById("toDospace");
document.getElementById("addToDo").addEventListener('click', function    addToDo()
{
var aToDo = document.getElementById("newToDo").value;
if(document.getElementsByTagName("tr").length == 18)
{
    document.getElementById('message').innerHTML = 'To many todos!';  
}
else if (aToDo === '')
{
  document.getElementById('message').innerHTML = 'Cannot be empty!';
}
else
{    
  var row = document.createElement("tr");
toDoSpace.appendChild(row);
var cell= row.insertCell(0);
cell.innerHTML =  aToDo;      
document.getElementById("newToDo").value = '';
}
});

在最后一个 else 块中创建一个删除按钮并添加点击事件侦听器。在里面，你应该从你的toDoSpace中删除孩子

这是MDN https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild 的链接

正如Binvention所说，你只需要添加一个元素以及每一行，该元素都有一个点击侦听器，带有一个用于删除它所包含的父行的函数。我的编辑仅涉及创建第二个单元格并使用：

cellX.innerHTML = "X";
cellX.onclick = function(){ this.parentNode.remove() };

以删除放入它的父行。下面是未应用样式的完整工作示例：

var toDoSpace = document.getElementById("toDospace");
document.getElementById("addToDo").addEventListener('click', function    addToDo()
{
var aToDo = document.getElementById("newToDo").value;
if(document.getElementsByTagName("tr").length == 18)
{
    document.getElementById('message').innerHTML = 'To many todos!';  
}
else if (aToDo === '')
{
  document.getElementById('message').innerHTML = 'Cannot be empty!';
}
else
{    
  var row = document.createElement("tr");
toDoSpace.appendChild(row);
var cell= row.insertCell(0);
var cellX= row.insertCell(1);
cell.innerHTML =  aToDo; 
cellX.innerHTML = "X";
cellX.onclick = function(){ this.parentNode.remove() };
document.getElementById("newToDo").value = '';
}
});
<html>
<head>
</head>
<body>
  <div >
    <table id="toDospace">
    </table>
    <input type="text" id="newToDo"></input>
    <button id="addToDo">Add ToDo</button>
  </div>
    
    
</body>
</html>

相关文章：