删除行

此示例展示了如何实现一个删除按钮，在完成时移除表格行。首先，让我们看一下表格主体：

<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>

🔗Demo