纯javascript删除html表中的选定行[重复]

Question

这个问题在这里已有答案：

• Why does firstChild not return the first element? 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

您可以使用document.querySelectorAll方法和正确的css选择器来获取所有选中的复选框。然后从表中删除带有选中复选框的行。

let tableRef = document.getElementById('links-list');
let tbody = tableRef.querySelector("tbody");

let checkedInputs = document.querySelectorAll("input[type='checkbox']:checked");
Array.prototype.slice.call(checkedInputs)
   .forEach( input => tbody.removeChild(input.parentNode.parentNode))

也可以用这样的es7语法编写

[...checkedInputs].forEach( input => tbody.removeChild(input.parentNode.parentNode))

Answer 2

这可能是下面的那个，与tableRows[i].querySelector('input').checked，因为.firstChild是一个textnode。此外，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，因此当同时删除多行时，基于索引的删除是不可靠的。因此，它应该遍历实际节点，而不是纯索引。

Answer 3

使用children属性而不是firstChild属性。您还可以通过避免元素重新计算来增强代码。例如，您已经找到了表，因此从中获取行。

当你删除行时，从最后开始然后上升。

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

  for (var k = checkedIndexes.length - 1; k >= 0; k--) {
    tableRef.deleteRow(checkedIndexes[k]);
  }
});

<table id="links-list">
  <tr>
    <td>
      <input type=checkbox>
    </td>
    <td>
      Test1
    </td>
  </tr>
  <tr>
    <td>
      <input type=checkbox>
    </td>
    <td>
      Test2
    </td>
  </tr>
  <tr>
    <td>
      <input type=checkbox>
    </td>
    <td>
      Test3
    </td>
  </tr>
  <tr>
    <td>
      <input type=checkbox>
    </td>
    <td>
      Test4
    </td>
  </tr>
  <tr>
    <td>
      <input type=checkbox>
    </td>
    <td>
      Test5
    </td>
  </tr>
</table>

<input type=button value="delete" id="delete">

Answer 4

你有2个错误，首先你没有正确得到这个值;其次，您要在列表中删除您正在迭代的内容，因此您需要修复它。试试这个：

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].firstElementChild.checked;
    if (checkboxSelected) {
      checkedIndexes.push(i);
    }
  }

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

fiddle