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 个答案: