hx-swap-oob
基本は hx-target の場所を更新するのが基本ですが、hx-swap-oob を利用すると、hx-target の場所に加えて hx-swap-oob の場所も置き換えることができます。
<form action="/sample/swap-oob.html" method="POST" hx-post="/sample/swap-oob.html" hx-trigger="submit" hx-target="this" hx-swap="outerHTML"> <input type="submit" name="submit" value="demo"> </form> <div id="result-a" class="demo">Aエリア id="result-a"</div> <div id="result-b" class="demo">Bエリア id="result-b"</div> <div id="result-c" class="demo">Cエリア id="result-c"</div>
※ hx-swap を none にしてみよう！ ボタンが消えずに残ります。
Aエリア id="result-a"
Bエリア id="result-b"
Cエリア id="result-c"
<div>更新しました</div>
<div id="result-a" class="demo" hx-swap-oob="true">複数の場所を</div>
<div id="result-c" class="demo" hx-swap-oob="true">別々に更新！</div>
