Latihan 1 dari materi Konfirmasi dan Dialog di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya <table> dengan satu baris: User 1 dan <button hx-swap="outerHTML">Hapus</button>. Biarkan tabel dan hx-swap-nya, lalu di <button> yang sama:
hx-delete="/api/users/1".hx-confirm berisi pertanyaan, misalnya hx-confirm="Yakin ingin menghapus user ini?". Teksnya bebas, asal gak kosong.hx-target="closest tr", supaya yang diganti baris tabel yang memuat tombol itu.Lalu, di bawah tabel, tulis balasan server untuk request itu:
<template data-url="/api/users/1" data-method="delete"></template>: status 200 (bawaannya) tanpa isi, jadi barisnya diganti kosong dan hilang. Jangan beri data-status="204": htmx gak menukar apa pun untuk 204, dan barisnya tetap terlihat.Yang dicek:
<button> punya hx-delete persis /api/users/1 dan hx-target persis closest tr.<button> punya hx-confirm, dan isinya gak kosong.<template data-url="/api/users/1" data-method="delete">, tanpa data-status="204".hx-confirm, hx-delete, dan closest tr di luar komentar.Di pratinjau, hx-confirm disetujui otomatis (ada catatan di Console), lalu DELETE /api/users/1 dijawab template-mu, dan baris User 1 hilang.
