HTMX无需hx-post/get等属性能否触发操作？表单销毁场景求解

你可以通过以下几种方式实现取消按钮销毁表单的需求，无需依赖实际后端请求：

方法1：原生JS结合HTMX事件（最直接） #

利用HTMX的hx-on属性，在点击按钮时直接执行原生JS删除目标元素，完全跳过HTMX的请求流程：

<button hx-on="click: document.getElementById('delete__product').remove();">
    Cancel Request
</button>

去掉原按钮中的href="javascript:void(1)"和多余的hx-trigger，因为hx-on已经绑定了点击事件。

方法2：纯HTMX交换方式 #

如果想完全用HTMX的语法实现，可以给按钮添加hx-get指向当前页面锚点，配合hx-swap="delete"实现元素移除：

<button hx-get="#" hx-target="#delete__product" hx-swap="delete">
    Cancel Request
</button>

hx-get="#"会发起一个无意义的请求（指向当前页面），后端无需额外处理，HTMX会在请求完成后用delete交换策略移除目标表单。

修改后的完整表单示例（以方法1为例） #

<form method="post" id="delete__product">
    {% csrf_token %}
    <p>Are you sure you want to delete ""?</p>
    <button hx-on="click: document.getElementById('delete__product').remove();">
        Cancel Request
    </button>
    <button hx-post="{% url 'catalog:DeleteProduct' product.pk %}" hx-target="#delete__product">
        Delete
    </button>
</form>

内容的提问来源于stack exchange，提问作者Get No