rails 検索窓の下にインクリメンタルサーチされた同じuserが増え続ける

Question

前提・実現したいこと

railsでチャットアプリを作っていてインクリメンタルサーチを実装しているのですが、
検索窓に文字を打ち込みそれを消すと、インクリメンタルサーチされたuserが増え続けていってしまいます
これをどうにか
文字を打ち込み　->　サーチされる　-> 文字を消す　-> サーチされたものも消えるようにしたいです

発生している問題・エラーメッセージ

https://gyazo.com/b36bbfbba9c3127d5701e6ab1f10ae97

該当のソースコード

$(document).on('turbolinks:load', function(){

  var search_list = $("#user-search-result");
  var member_list = $("#member-search-result");

  function appendUsers(user){
      var html =  `<div class="chat-group-user clearfix">
                      <p class="chat-group-user__name">${user.name}</p>
                      <div class="user-search-add chat-group-user__btn chat-group-user__btn--add" data-user-id=${user.id} data-user-name=${user.name}>追加</div>
                  </div>`;
                  search_list.append(html);
    return html;
  }

  function appendMembers(name, user_id) {
    var html = `<div class='chat-group-user clearfix js-chat-member' id='chat-group-user-8'>
            <input name='group[user_ids][]' type='hidden' value="${user.name}">
            <p class='chat-group-user__name'>${name}</p>
            <a class='user_search_remove chat-group-user__btn chat-group-user__btn--remove js-remove-btn'>削除</a>
            </div>`
    member_list.append(html);
}
  function appendNoUsers(info) {
    var html =`<div class="chat-group-user clearfix">
                <p class="chat-group-user__name">${ info }</p>
              </div>`

    search_list.append(html);
  }

$(function () {
    $("#user-search-field").on("keyup", function () {
        var input = $("#user-search-field").val();
        $.ajax({
            type: 'GET',
            url: '/users',
            data: { keyword: input },
            dataType: 'json'
        })
        .done(function (users) {
            $("#user_search_result").empty();
            if (users.length !== 0) {
                users.forEach(function (user) {
                    appendUsers(user);
                });
            }
            else {
                appendNoUsers("一致するユーザーはいません");
              }
             })
        .fail(function () {
            alert('ユーザー検索に失敗しました');
        })
    });


 $(function () {
    $(document).on("click", '.user_search_add', function () {
        var name = $(this).data("user-name");
        var user_id = $(this).data("user-id");
        $(this).parent().remove();
        appendMembers(name, user_id);
    });
    $(document).on("click", '.user_search_remove', function () {
        $(this).parent().remove();
    });
  });
 });
});

試したこと

https://qiita.com/yuki-n/items/fdc5f7d5ac2f128221d1
qiita等で調べて見たのですが、何がだめなのかわかりませんでした...
どうかよろしくお願いいたします

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

Comments

[退会済みユーザー]

回答に自信がないのでこちらで失礼します。
```ここに言語を入力
$(document).on("click", '.user_search_add', function () {
var name = $(this).data("user-name");
var user_id = $(this).data("user-id");
$(this).parent().remove();
appendMembers(name, user_id);
});
```
の
$(this).parent().remove();
でremoveが効いていないのが原因かと思います。
サーチされた結果でclass="chat-group-user"を指定してあるみたいなので、
こちらを指定して削除するようにしてみてはいかがでしょうか

[masahiro_tgw]

返事が遅くなって申し訳ありません、ありがとうございます！

Answer 1

見たところ .empty()が効いていないようなので、そのあたりをよく見ていたのですが、単純ミスの可能性があります。

以下のアンダーバーをハイフンにしてみてはいかがでしょう？

.done(function (users) {
  $("#user_search_result").empty();

.done(function (users) {
  $("#user-search-result").empty();

少なくともこの行は今動いておらず、ここを修正できれば動作の一部は回復すると思います。