javascript - 纯javascript删除html表格中选定的行

Question

这个问题已经有答案了:

Why does firstChild not return the first element? (5 个回答)

已关闭 5 年前。

我正在尝试使用纯 JavaScript 删除所选行或所有行。我无法删除选定的行。我的 fiddle 有什么问题吗？

编辑:第一行是标题，因此不考虑这一点。

document.getElementById("delete").addEventListener("click", function() {
  var tableRef = document.getElementById('links-list');
  var tableRows = document.getElementById("links-list").rows;
  var checkedIndexes = [];
  for (var i = 1; i < tableRows.length; i++) {
    var checkboxSelected = tableRows[i] && tableRows[i].cells[0].firstChild.checked;
    if (checkboxSelected) {
      checkedIndexes.push(i);
    }
  }

  for (var k = 0; k < checkedIndexes.length; k++) {
    tableRef.deleteRow(checkedIndexes[k]);
  }
});

Answer 1

这应该类似于下面的内容，带有 tableRows[i].querySelector('input').checked，因为 .firstChild 是一个文本节点。此外，tableRows 的索引以 0 开头。

document.getElementById('delete').addEventListener('click', function() {
    var tableRef = document.getElementById('links-list');
    var tableRows = document.getElementById('links-list').rows;

    var checkedRows = [];
    for (var i = 0; i < tableRows.length; i++) {
        if (tableRows[i].querySelector('input').checked) {
            checkedRows.push(tableRows[i]);
        }
    }

    for (var k = 0; k < checkedRows.length; k++) {
        checkedRows[k].parentNode.removeChild(checkedRows[k]);
    }
});

由于最后一个循环改变了dom，当同时删除多行时，基于索引的删除并不可靠。因此，它应该迭代实际节点，而不是纯索引。