JavaScript 通过单击删除当前 tr

在前端开发中，经常需要通过 JavaScript 实现删除当前行的功能。这样可以让用户更方便地删除他们不需要的数据。

在 HTML 中，表格是很常见的元素，我们可以通过 table 和 tr 标签创建一个表格。为了删除当前行，我们需要知道如何获取当前行，然后将其从 DOM 中删除。

以下是一个使用 JavaScript 实现删除当前行的示例代码：

// 获取所有的删除按钮
const deleteButtons = document.querySelectorAll('.delete');

// 为每个删除按钮添加点击事件处理程序
deleteButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 获取当前行
    const row = button.parentElement.parentElement;
    // 从 DOM 中删除当前行
    row.remove();
  });
});

在这个示例中，我们首先获取所有具有 delete 类的按钮。然后，我们使用 forEach 循环遍历所有的按钮，并为每一个添加一个点击事件处理程序。

在每个处理程序中，我们首先获取当前按钮所在的行。我们可以通过 button.parentElement.parentElement 获取到此行元素，并将其保存到 row 变量中。

最后，我们使用 remove 方法将当前行从 DOM 中删除。

如何使用这个例子？

要使用这个示例，您需要在 HTML 中创建一个表格，其中每个行都具有一个 delete 类以及一个删除按钮。以下是一个示例表格：

<table>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>32</td>
    <td><button class="delete">Delete</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane Smith</td>
    <td>27</td>
    <td><button class="delete">Delete</button></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Bob Johnson</td>
    <td>45</td>
    <td><button class="delete">Delete</button></td>
  </tr>
</table>

在这个表格中，我们为每个行元素添加了一个 delete 类和一个删除按钮。我们还需要将上述 JavaScript 代码放置在页面中，以便能够添加点击事件处理程序。

结论

使用 JavaScript 实现删除当前行可以让用户方便地删除不需要的数据。通过获取当前行并将其从 DOM 中删除，可以实现这个功能。此外，我们还可以在 HTML 中添加一个 delete 类和一个删除按钮，使得代码更为简洁优雅。