js セレクトボックスの中身を変えるには

Question

前提・実現したいこと

セレクトボックスの中身を体の部位を変えたいです
今の現状だと部位を変えたら前回のがそのまま残ってしまいます

該当のソースコード

function check() {
  let select = document.querySelector("#part");
  select.addEventListener('change',() => {
  const valueName = document.getElementById('part').value;
  const eventSelect = document.querySelector('#event');
  const XHR = new XMLHttpRequest();
  XHR.open("GET",`/muscle_events/${valueName}`,true);
  XHR.responseType = "json";
  XHR.send();
  XHR.onload = () => {
    const events = XHR.response
    let eventsJson = JSON.stringify(events)
    fetch(`/muscle_events/${valueName}`).then(response => response.json()).then(data=>{
      data.forEach(x=>{
        eventSelect.appendChild(Object.assign(document.createElement('option'),{value:x.id,textContent:x.event}));
      });
    });
  }
 })
}
  window.addEventListener("turbolinks:load", check);

<script src="select.js"></script>
<p>どこの部位を筋トレしますか？</p>
<%= form_tag url:"root_path" do |f| %>
  <%= select_tag :part,  options_for_select(MuscleEvent.parts.keys.map{|k| [I18n.t("enums.muscleevent.parts.#{k}"), k]}) %>
  <%= select_tag :event,id='event' %>
  <%= submit_tag "トレーニング開始" %>
<% end %>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。![イメージ説明]

Answer 1

data.forEach の直前で eventSelect の子要素を全て削除すればよいです。