刪除列

這個範例展示了如何實作一個刪除按鈕，在完成後移除表格列。首先，讓我們看看表格的主體

<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 屬性，用於確認刪除動作。它也將目標設定為 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">
      Delete
    </button>
  </td>
</tr>

🔗示範