Element: replaceChildren() メソッド

replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* … ,*/ paramN)

myNode.replaceChildren();

<h2>パーティーの食べ物リスト</h2>

<main>
  <div>
    <label for="no">No thanks!</label>

    <select id="no" multiple size="10">
      <option>りんご</option>
      <option>オレンジ</option>
      <option>ぶどう</option>
      <option>バナナ</option>
      <option>キウイフルーツ</option>
      <option>チョコレートクッキー</option>
      <option>ピーナッツクッキー</option>
      <option>チョコレートバー</option>
      <option>ハムサンド</option>
      <option>チーズサンド</option>
      <option>ファラフェルサンド</option>
      <option>アイスクリーム</option>
      <option>ゼリー</option>
      <option>人参スティックとフムス</option>
      <option>マルゲリータピザ</option>
      <option>ぺぱろーにぴざ</option>
      <option>ビーガン野菜ピザ</option>
    </select>
  </div>

  <div class="buttons">
    <button id="to-yes">"Yes" へ移動 --&gt;</button>
    <button id="to-no">&lt;-- "No" へ移動</button>
  </div>

  <div>
    <label for="yes">Yes please!</label>

    <select id="yes" multiple size="10"></select>
  </div>
</main>

main {
  display: flex;
}

div {
  margin-right: 20px;
}

label,
button {
  display: block;
}

.buttons {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

select {
  width: 200px;
}

const noSelect = document.getElementById("no");
const yesSelect = document.getElementById("yes");
const noBtn = document.getElementById("to-no");
const yesBtn = document.getElementById("to-yes");

yesBtn.addEventListener("click", () => {
  const selectedTransferOptions =
    document.querySelectorAll("#no option:checked");
  const existingYesOptions = document.querySelectorAll("#yes option");
  yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);
});

noBtn.addEventListener("click", () => {
  const selectedTransferOptions = document.querySelectorAll(
    "#yes option:checked",
  );
  const existingNoOptions = document.querySelectorAll("#no option");
  noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions);
});