使用 JavaScript 删除表格行按钮 HTML

在网页开发中，我们经常需要删除表格中的某一行数据。使用 JavaScript 删除表格行按钮是一个很常见的需求，下面就来介绍一下如何实现。

步骤如下：

1. 给每一行添加删除按钮
2. 当用户点击删除按钮时，获取当前行的索引并删除该行

具体代码如下：

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>小明</td>
      <td>18</td>
      <td><button onclick="deleteRow(this)">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>小红</td>
      <td>20</td>
      <td><button onclick="deleteRow(this)">删除</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>小刚</td>
      <td>22</td>
      <td><button onclick="deleteRow(this)">删除</button></td>
    </tr>
  </tbody>
</table>

我们给每个删除按钮添加了一个 onclick 事件，该事件会调用 deleteRow 函数。

function deleteRow(btn) {
  var row = btn.parentNode.parentNode; // 当前行
  row.parentNode.removeChild(row); // 删除当前行
}

deleteRow 函数的参数是按钮对象，通过该对象获取父元素的父元素，即当前行，然后执行 removeChild 方法删除当前行。

以上就是使用 JavaScript 删除表格行按钮的实现方法。