使用 dom JS 删除 tr 标签

Question

我在js中创建了一个函数，该函数使用DOM方法创建了一个表，然后我添加了一些按钮，该按钮应该删除相应的行。你能帮我构建一个删除行的函数吗？ 这是我的代码

function creaTable(a, b) {
var tableDiv = document.getElementById("myDynamicTable");
var tbl = document.createElement('table');
tbl.setAttribute("id", "tabella");
var tbdy = document.createElement('tbody');
tbl.appendChild(tbdy);
tbl.border = '1';
for (var j = 0; j < a ; j++) {
var tr = document.createElement('tr');
tbdy.appendChild(tr);
var btnDelete = document.createElement('input');
btnDelete.setAttribute("type", "button");
btnDelete.setAttribute("value", "-");
//  btnDelete.setAttribute("onclick", "delete(tr)");
tr.appendChild(btnDelete);
for (var k = 0; k < b ; k++) {
var td = document.createElement('td');
td.width = '75';
td.appendChild(document.createTextNode("Cella "+j+","+k));
tr.appendChild(td);
}
}
tableDiv.appendChild(tbl);
}

Answer 1

你只需要一个.remove()tr的函数。还要确保使用const而不是var，用于块作用域而不是函数作用域，因为您处于 for 循环中：

// ...
const tr = document.createElement('tr');
tbdy.appendChild(tr);
const btnDelete = document.createElement('input');
btnDelete.type = "button";
btnDelete.value = "-";
btnDelete.onclick = () => tr.remove();
// ...

您也可以直接分配给元素的属性，而不是setAttribute- 这样，它看起来更干净。

Answer 2

您可以使用

1. "最接近"来查找父元素。 (这在InternetExplorer中不起作用，请参阅此处以获取支持的浏览器和详细信息(
2. 您可以使用节点上的"addEventListener('eventType'，{FunctionName}("函数将事件绑定到元素。 - 您可以在此处或此处阅读更多内容。
   3. 在 tr 元素上运行"删除"函数。

下面是一个运行代码笔示例。

//------------------------------------------------------------------
function creaTable(a, b) {
var tableDiv = document.getElementById("myDynamicTable");
var tbl = document.createElement("table");
tbl.setAttribute("id", "tabella");
var tbdy = document.createElement("tbody");
tbl.appendChild(tbdy);
tbl.border = "1";
for (var j = 0; j < a; j++) {
var tr = document.createElement("tr");
tbdy.appendChild(tr);
var btnDelete = document.createElement("input");
btnDelete.setAttribute("type", "button");
btnDelete.setAttribute("value", "-");
// register the btn to start a function on click
btnDelete.addEventListener("click", deleteMyTr);
tr.appendChild(btnDelete);
for (var k = 0; k < b; k++) {
var td = document.createElement("td");
td.width = "75";
td.appendChild(document.createTextNode("Cella " + j + "," + k));
tr.appendChild(td);
}
}
tableDiv.appendChild(tbl);
}
creaTable(5, 6);
// delete function
function deleteMyTr() {
// get the closest tr -> this is the btn element
let tr = this.closest("tr");
// remove the element
tr.remove();
}