How can I modify this code so that each table cell can be deleted?
Question
I have a simple task manager where a user can record "toDos" however, I cannot figure out how to make it so that a user can delete a completed task. Any suggestions?
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 = '';
}
});
2 answers
solution1
0 ACCPTED 2016-03-06 23:55:09
In your last else block create a delete button and add click event listener. Inside of it you should removeChild from your toDoSpace
Here is link to MDN https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
solution2
0 2016-03-07 00:07:01
As Binvention says you'd just need to add an element along with each row that has a click listener with a function for removing the parent row it's contained in. My edit simply involves creating a second cell and using:
cellX.innerHTML = "X";
cellX.onclick = function(){ this.parentNode.remove() };
to remove the parent row it was put in. Here's the full working example, without styling applied:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.