删除js表中的特定按钮

Question

我的JS有一个待办事项表。 每次您键入新任务时，它都会在一个包含该任务的表中添加两个新行，并在其中添加一个按钮以将其再次删除。

这是我的问题：

当您以正确的顺序删除任务时，一切都正确。 但是，如果不是这样，错误的按钮将被删除

因此，即使按钮不是表中的第一个按钮，也应如何删除？

 var todo = []; var i; function newPoint(){ var newpoint = prompt("new task", "..."); if (newpoint == null||newpoint==""){ alert("Cancel..."); return 0; } else{ newCell(name); } } function deleteAll(){ var tableLen = document.getElementById("todoTable").rows.length; for(i = 0;i<tableLen;i++){ document.getElementById("todoTable").deleteRow(0); } } function newCell(name){ var table = document.getElementById("todoTable"); var row = table.insertRow(0); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell2.className ="btnClass"; cell2.onclick = "" cell1.innerHTML = name; var btn = document.createElement("button"); var t = document.createTextNode("done"); btn.id = "ownButtos"; btn.className = "arrayButton"; btn.onclick = function () { this.parentElement.removeChild(this); document.getElementById("todoTable").deleteRow(this); }; btn.appendChild(t); cell2.appendChild(btn); }

 .buttons{ background-color: rgb(34, 158, 34); color: white; border: none; width: 100px; height: 50px; } .buttons:hover{ background-color: rgb(16, 124, 16); cursor: pointer; } .arrayButton{ background-color: rgb(34, 158, 34); color: white; border: none; width: 50px; height: 25px; } .arrayButton:hover{ background-color: rgb(16, 124, 16); cursor: pointer; } .styleTR{ color: black; } ul{ margin: 0; padding: 0; width: 200px; } body{ background-color: aqua; } #todo,ownButtons{ display: inline-block; vertical-align: middle; margin: 10px 0; } #todoTable{ border: 0px solid rgb(89, 0, 255); } .btnClass{ background-color:rgb(34, 158, 34); }

 <!DOCTYPE html> <html> <head> <script src="Todo.js"></script> <link rel="stylesheet" type="text/css" href="sly.css"> </head> <body> <ul> <button id="style" class="buttons" onclick="newPoint();">new task</button> <button id="style" class="buttons" onclick="deleteAll();">delete list</button> </ul> </table> <table id="todoTable" border="2px"> <tr> </tr> </table> <h3 id="todo"></h3> </body> </html>

Answer 1

问题出在btn.click 。

替换为

btn.click = document.getElementById("todoTable").deleteRow(this.parentElement.parentElement.rowIndex);

对于deleteRow我传递了单击的任务的索引。

删除js表中的特定按钮

问题描述

1 个解决方案

解决方案1
0 2018-02-12 10:22:29

删除js表中的特定按钮

问题描述

1 个解决方案

解决方案1 0 2018-02-12 10:22:29

解决方案1
0 2018-02-12 10:22:29