072. delete（要素の削除：サーバーの合図で「消滅」させる）
原理：Webサイトの「お片付け」
役割を終えた要素を消す
HTMXには、サーバーからのレスポンスを「どこかに表示する」のではなく、「ターゲットとした要素を画面から完全に消し去る」ための特別な設定があります。それが delete（デリート）です。
「これを消して」というリクエストを送り、サーバーが「了解した」と答えたら、HTMXはその要素をHTMLから物理的に削除します。上書きでも挿入でもなく、純粋な「消去」です。
実践：リストの掃除をスマートに行う
1. リスト項目を消し去る
ToDoリストやメール一覧で、ゴミ箱ボタンを押した時にその行を消す、最も代表的な例です。
<tr id="message-8">
<td>いらないメールです</td>
<td>
<!--
hx-delete: 削除リクエストを送信
hx-target: 親の行(#message-8)をターゲットにする
hx-swap: delete (この行自体を消去する)
-->
<button hx-delete="/messages/8"
hx-target="#message-8"
hx-swap="delete">
削除
</button>
</td>
</tr>
2. 使い終わったメッセージ（通知）を消す
画面上部に出ていた「保存しました」という通知を、ユーザーが「閉じる（×）」ボタンを押した瞬間に消す例です。
<div class="alert" id="save-alert">
<span>保存に成功しました！</span>
<button hx-get="/api/dismiss"
hx-target="#save-alert"
hx-swap="delete">
×
</button>
</div>
3. ステップ・バイ・ステップ解説
- 消したいものを決める: IDなどで明確にターゲットを指定します。
- 実行:
hx-swap="delete"を指定します。 - サーバーの応答: サーバーの中身（HTML）は無視されますが、一応 200 OK などの成功コードを返す必要があります。
比較：outerHTML vs delete
outerHTML で「空」を返す
- 方法: サーバーが「何もない（空の文字列）」を返すと、実質的に要素は消えます。
- 欠点: サーバーがいちいち「空」を返さなければなりません。
hx-swap="delete"
- 方法: サーバーが何を返そうが生じ、HTMX側で強制的に要素を消します。
- 利点: 「消す」意思がコード上でハッキリしていて、サーバーの中身に依存しません。
まとめ：初心者のための「断捨離」の美学
delete は、Webアプリを「使い終わったあとも綺麗な状態」に保つための、お掃除職人のような属性です。
- 視覚的な反応: ユーザーにとって「押したら消える」という動きは、自分の操作がサーバーに届いたことを実感できる、非常に満足度の高いアクションです。
- CSSアニメーションで優しく: 単にパッと消えるのではなく、
htmx-swapping（087.解説予定）などのクラスを使って、フェードアウトさせながら消すと、さらに高級感が出ます。 - サーバーの確認を忘れずに: 画面から消す前に、サーバー側で本当にデータが消えていることを確認しましょう。見た目だけ消えて、リロードしたら復活していた……というのは避けたいバグです。
不要なものは、潔く。delete を使って、画面上の「ノイズ」を取り除き、常に整理整頓された心地よいユーザー体験を提供してください。次の記事では、通信はするけれどあえて画面を変えない「none」（073. none）という風変わりな設定をご紹介します。