如何点击按钮时使用JavaScript和HTML删除表格行？

没问题！我来一步步教你怎么基于你给出的HTML结构，实现点击按钮删除表格选中行的功能：

第一步：完善HTML结构，添加删除按钮 #

首先，在你的表单里新增一个删除按钮，同时给每行的复选框统一加个类名，方便后续JS选择：

<div>
  <h1>Info</h1>
  <form>
    <!-- 新增删除按钮，注意设置type为button避免表单提交 -->
    <button type="button" id="deleteSelectedBtn">删除选中行</button>
    <table id="t">
      <tr>
        <th></th>
        <th>index</th>
        <th>name</th>
        <th>job</th>
        <th>date</th>
        <th>department</th>
      </tr>
      <tr>
        <!-- 给复选框加统一类名rowCheckbox -->
        <td><input type="checkbox" class="rowCheckbox"></td>
        <td>1</td>
        <td>Alex</td>
        <td>Hacker</td>
        <td>100000000000000000</td>
        <td>2</td>
      </tr>
      <!-- 其他行的复选框都要加上rowCheckbox类 -->
    </table>
  </form>
</div>

第二步：编写JavaScript实现删除逻辑 #

接下来写JS代码，监听按钮点击事件，找到所有被选中的复选框，然后删除它们所在的行：

// 获取删除按钮和目标表格
const deleteBtn = document.getElementById('deleteSelectedBtn');
const targetTable = document.getElementById('t');

// 给按钮绑定点击事件
deleteBtn.addEventListener('click', function() {
  // 获取所有被勾选的复选框，querySelectorAll返回静态节点列表，不受DOM变化影响
  const checkedBoxes = document.querySelectorAll('.rowCheckbox:checked');
  
  // 遍历每个选中的复选框，删除对应的行
  checkedBoxes.forEach(checkbox => {
    // 用closest快速找到复选框所在的<tr>元素
    const targetRow = checkbox.closest('tr');
    // 从表格中移除该行
    targetTable.removeChild(targetRow);
  });
});

关键细节提醒 #

• 按钮类型必须设为type="button"：如果不指定，按钮默认是type="submit"，点击会触发表单提交刷新页面，直接打断删除逻辑，这一点一定要注意！
• 为什么用closest('tr')？ 相比一层层调用parentNode，closest()可以直接找到当前元素最近的父级<tr>，代码更简洁也更可靠，就算后续表格结构微调也不容易出错。
• 静态节点列表的优势：querySelectorAll返回的是静态的NodeList，不会因为DOM元素被删除而动态变化，所以正序遍历也不会出现索引错乱的问题，比动态的HTMLCollection（比如getElementsByClassName）更省心。

可选优化：添加全选功能 #

如果需要批量操作的话，可以给表头加个全选复选框，提升用户体验：

在表头的第一个<th>里添加全选框：

<th><input type="checkbox" id="selectAllCheckbox"></th>

然后添加对应的JS逻辑：

const selectAll = document.getElementById('selectAllCheckbox');
const allRowCheckboxes = document.querySelectorAll('.rowCheckbox');

// 监听全选框的状态变化
selectAll.addEventListener('change', function() {
  // 同步所有行复选框的状态
  allRowCheckboxes.forEach(checkbox => {
    checkbox.checked = selectAll.checked;
  });
});

这样用户就能一键选中所有行再批量删除啦~

内容的提问来源于stack exchange，提问作者Youlfey