删除行

本页面演示了如何实现删除按钮，该按钮在请求完成后删除表格行。首先让我们看一下表格主体：

<table class="table delete-row-example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Status</th>
      <th></th>
    </tr>
  </thead>
  <tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s">
    ...
  </tbody>
</table>

表格主体有一个 hx-confirm 属性用于确认删除操作。它还将目标设置为所有按钮（ 从 DOM 中的父级继承）最近的表格行。hx-swap 及 hx-target 交换规则是在收到响应等待 1 秒后交换整个目标。最后一点是为了让我们可以使用以下 CSS：

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

在交换或删除行之前淡出该行。

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

<tr>
  <td>Angie MacDowell</td>
  <td>[email protected]</td>
  <td>Active</td>
  <td>
    <button class="btn danger" hx-delete="/contact/1">
      Delete
    </button>
  </td>
</tr>
Server Requests ↑ Show

演示