删除行

本示例展示如何实现一个删除按钮，在操作完成后移除表格行。首先我们来看表格主体：

<table class="table delete-row-example">
  <thead>
    <tr>
      <th>姓名</th>
      <th>邮箱</th>
      <th>状态</th>
      <th></th>
    </tr>
  </thead>
  <tbody hx-confirm="确定要删除吗？" hx-target="closest tr" hx-swap="outerHTML swap:1s">
    ...
  </tbody>
</table>

表格主体有一个hx-confirm属性用于确认删除操作。它还设置了目标为closest tr，即最近的表格行（hx-target可以从DOM中的父元素继承）。hx-swap中的交换规范表示要交换整个目标，并在收到响应后等待1秒。最后这部分是为了我们可以使用以下CSS：

tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 1s ease-out;
}

以便在行被交换/移除前实现淡出效果。

每行都有一个带有hx-delete属性的按钮，该属性包含用于发出DELETE请求以从服务器删除行的URL。此请求返回200状态码和空内容，表示该行应该被替换为空。

<tr>
  <td>Angie MacDowell</td>
  <td>angie@macdowell.org</td>
  <td>Active</td>
  <td>
    <button class="btn danger" hx-delete="/contact/1">
      删除
    </button>
  </td>
</tr>

🔗演示