クリックするたびに要素が追加されてしまう。

Question

実現したいこと。困っていること。

あるボタンをクリックすると、そのボタンに応じてパラメーターが取得でき、それをrails側で処理することで配列が返ってきます。
その配列を一覧表示したいです。一覧表示自体はできるのですが、appendChildを使っているため、ボタンを押すたびに要素が追加されてしまいます。
ボタンを何回押しても１回分の結果のみが表示されるようにするにはどうしたら良いでしょうか？

document.getElementById('XXX').on('XXX_click', function(data) {
  var send_data;
  send_data = data[0];
  return $.ajax({
    url: '/hoge',
    type: 'GET',
    data: {
      date_params: send_data
    },
    dataType: 'json',
    success: function(data) {
      var arrayId, hoge_list, i;
      console.log(data);
      i = 0;
      while (i < data.length) {
        hoge_list = document.getElementById('hoge_list');
        arrayId = document.createTextNode(data[i].id);
        hoge_list.appendChild(arrayId);
        i++;
      }
    },
    error: function(data) {
      alert('errror');
    }
  });
});

#hoge_list

Comments

[bmk]

whileの前にhoge_list.innerHTML="";などで空にするとかどうでしょうか

[amby]

ありがとうございます！ご教示いただいた通り記述したところ解決できました！

[yambejp]

$.ajaxのsuccess/errorは古い書き方です、done/failメソッドに書き換えるか
fetchをご利用ください

[amby]

そうなんですね・・・！勉強になります。
ありがとうございます。

Answer 1

hoge_list.innerHTML="";
で解決できました。皆様誠にありがとうございました。