行の削除

この例では、完了時にテーブルの行を削除する削除ボタンを実装する方法を示します。まず、テーブルの本体を見てみましょう。

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

行がスワップまたは削除される前にフェードアウトします。

各行には、サーバーから行を削除するために DELETE リクエストを発行する URL を含む hx-delete 属性を持つボタンがあります。このリクエストは、空のコンテンツと 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>

🔗デモ