Question

我有一个简单的任务管理器，用户可以在其中记录＆＃34; toDos＆＃34;但是，我无法弄清楚如何制作它以便用户可以删除已完成的任务。有什么建议吗？

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 = '';
}
});

Answer 1

在上一个 else 块中，创建一个删除按钮并添加click事件侦听器。在其中你应该从你的toDoSpace 删除孩子

以下是MDN https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

的链接

Answer 2

正如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>

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

2 个答案: