如何用HTMX在请求前清除Bootstrap模态框内容？

你可以利用HTMX内置的Hyperscript（不需要额外引入JS文件，HTMX原生支持）来实现请求前清空模态框主体，完全不用写独立的JS函数，也不需要新增服务端路由。

方案一：在请求触发元素上绑定前置清空逻辑 #

直接给触发HTMX请求的按钮加上Hyperscript指令，在htmx:before-request事件触发时清空模态框主体：

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="modal" data-bs-target="#vendorModal"
        hx-get="/vendors/{{VendorId}}"
        hx-target="#modal-body"
        _="on htmx:before-request set #modal-body.innerHTML to ''">
  查看供应商 {{VendorId}}
</button>

<!-- Bootstrap模态框 -->
<div class="modal fade" id="vendorModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">供应商详情</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" id="modal-body">
        <!-- 动态内容会被HTMX替换 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

这里的_="on htmx:before-request set #modal-body.innerHTML to ''"是核心：它监听HTMX的请求前置事件，直接将模态框主体的内容置空，完全在前端完成，不需要服务端介入。

方案二：绑定模态框显示事件清空内容 #

如果希望在模态框刚弹出时就清空内容（而非仅在请求发起时），可以把逻辑绑定到Bootstrap的show.bs.modal事件上：

<button type="button" class="btn btn-primary" 
        data-bs-toggle="modal" data-bs-target="#vendorModal"
        data-vendor-id="{{VendorId}}">
  查看供应商 {{VendorId}}
</button>

<div class="modal fade" id="vendorModal" tabindex="-1"
     hx-get="/vendors/{vendorId}"
     hx-target="#modal-body"
     hx-trigger="show.bs.modal"
     _="on show.bs.modal 
         set vendorId to document.querySelector('[data-bs-target=\"#vendorModal\"]:focus').dataset.vendorId 
         then set #modal-body.innerHTML to ''">
  <!-- 模态框结构 -->
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">供应商详情</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" id="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

这个方案会在模态框开始显示时，先获取触发按钮的VendorId，再清空主体内容，最后发起HTMX请求。

为什么之前的htmx-request类方案不生效？ #

HTMX只会给触发请求的元素和通过hx-indicator指定的元素添加.htmx-request类，不会自动应用到模态框主体，所以没法通过CSS来直接清空或隐藏旧内容。上面的Hyperscript方案则直接操作DOM，避开了这个限制。

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