javascript - 使用 javascript 中的复选框删除 HTML 表中的多行

Question

我无法删除选定的行。我想删除用复选框选中的行。但我无法访问表行并检查复选框是否已选中。我该怎么办？

代码:

<div class="container">
  <div class="tab tab-1">
    <table id="table" border="1">
      <tr>
        <th></th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>edit</th>
      </tr>
      <tr>
        <td><input type="checkbox" id="select"></td>
        <td>A1</td>
        <td>B1</td>
        <td>10</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" id="select"></td>
        <td>A3</td>
        <td>B3</td>
        <td>30</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" id="select" class="select"></td>
        <td>A2</td>
        <td>B2</td>
        <td>20</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
    </table>
  </div>
  <button onclick="deleteRow();">Remove</button>
  <script>
    function deleteRow() {
      var table = document.getElementById("table");
      var rowCount = table.rows.length;
      console.log("rowcount : " + rowCount);
      for (var i = 1; i < rowCount; i++) {
        var c = table.rows[i].cells[0].childNodes;
        console.log(c);
        if (c.checked == 1) {
          console.log("i :" + i);
          table.deleteRow(i);
        }
      }
    }.
  </script>

Answer 1

使用querySelectorAll()和:checked选择所有选中的复选框。

parentNode.parentNode是获取父tr节点

function deleteRow() {
  document.querySelectorAll('#table .select:checked').forEach(e => {
    e.parentNode.parentNode.remove()
  });
}

<div class="container">
  <div class="tab tab-1">
    <table id="table" border="1">
      <tr>
        <th></th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>edit</th>
      </tr>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>A1</td>
        <td>B1</td>
        <td>10</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>A3</td>
        <td>B3</td>
        <td>30</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="select"></td>
        <td>A2</td>
        <td>B2</td>
        <td>20</td>
        <td><input type="button" value="edit" id="edit"></td>
      </tr>
    </table>
  </div>
</div>
<button onclick="deleteRow();">Remove</button>

注意:避免使用重复的id