如何用Turbo无需新增路由快速清除弹窗div内容？

不需要新增后端路由，这几种前端层面的方法就能搞定：

1. 内联Turbo Stream模板 + 按钮触发 #

直接在页面里嵌入Turbo Stream模板，通过按钮的data-turbo-stream属性触发动作，替换目标div为空内容：

<!-- 弹窗容器 -->
<div id="modal-content">
  <p>弹窗内容示例</p>
  <!-- 关闭按钮，触发指定的Turbo Stream -->
  <button type="button" data-turbo-stream="#clear-modal">关闭</button>

  <!-- 隐藏的内联Turbo Stream模板 -->
  <turbo-stream id="clear-modal" action="replace" target="modal-content">
    <template>
      <div id="modal-content"></div>
    </template>
  </turbo-stream>
</div>

点击按钮时，Turbo会自动执行这个内联的Stream动作，把modal-content替换成空div，实现清空效果。

2. JavaScript直接创建Turbo Stream元素 #

如果需要更灵活的逻辑控制，可通过JS动态生成Turbo Stream并执行：

// 获取关闭按钮
const closeBtn = document.querySelector('#close-modal');
closeBtn.addEventListener('click', () => {
  // 创建Turbo Stream元素
  const stream = document.createElement('turbo-stream');
  stream.setAttribute('action', 'replace');
  stream.setAttribute('target', 'modal-content');
  // 设置模板内容为空div
  stream.innerHTML = '<template><div id="modal-content"></div></template>';
  // 添加到页面触发执行
  document.body.appendChild(stream);
});

3. 利用Turbo Frame重置（如果弹窗基于Frame） #

如果你的弹窗是用Turbo Frame实现的，可通过访问空锚点快速重置Frame内容：

<turbo-frame id="modal-frame">
  <p>Frame弹窗内容</p>
  <button type="button" onclick="Turbo.visit('#', { frame: 'modal-frame' })">关闭</button>
</turbo-frame>

调用Turbo.visit('#', { frame: 'modal-frame' })会让指定Frame加载空内容，间接实现清空效果。

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