删除父 tr jQuery

在开发网页时，我们经常需要删除一个 table 中的某一行。jQuery 提供了一种简单的方法来删除行。但是，如果我们需要删除某一行的父 tr，该怎么做呢？

使用 jQuery 删除父 tr

我们可以通过以下代码使用 jQuery 删除父 tr：

$(this).closest('tr').remove();

在这个例子中，我们使用了 closest() 方法来查找最近的父级 tr 元素，然后使用 remove() 方法将其从 DOM 中移除。注意，closest() 方法会一直向上遍历 DOM 直到找到最近的匹配元素为止。

例子

以下是一个完整的例子，演示如何使用 jQuery 删除父 tr：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td><button class="delete">Delete</button></td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td><button class="delete">Delete</button></td>
    </tr>
  </tbody>
</table>

<script>
  $(document).on('click', '.delete', function() {
    $(this).closest('tr').remove();
  });
</script>

在这个例子中，我们为每个删除按钮添加了一个 click 事件监听器。当用户点击按钮时，我们使用上面的代码删除了按钮所在行的父 tr 元素。

结论

在这个简短的教程中，我们学习了如何使用 jQuery 删除父 tr 元素。通过 closest() 方法可以方便地查找父级元素，remove() 方法可以轻松地从 DOM 中移除元素。这是一个常见的任务，我们希望这种方法对你有所帮助！