お世話になっております。
現在、プログラミングスクールにて、チーム開発でフリマアプリを開発しています。
現在、出品した商品を編集する機能を実装しています。

解決したいこと

カテゴリの変更で、既存のカテゴリを削除したい。

#仮説
カテゴリーが変更された時にenptyメソッド等で既存のカテゴリーを空にすればよいのでは？と仮説を立てた。

edit.html.haml


.sell-new
  .sell-new__wrapper
    .sell-new__wrapper__form
      = form_for @item do |f|
        %ul
        - @item.errors.full_messages.each do |message|
          %li= message
        .sell-new__wrapper__form__field.append__category
          = f.label :"カテゴリー" 
          %span.sell-new__wrapper__form__field__attention 必須
          %br/
          =f.collection_select :category_id, @item.category.root.siblings, :id, :name, class:"serect_field"
          =f.collection_select :category_id, @item.category.parent.siblings, :id, :name, class:"serect_field"
          =f.collection_select :category_id, @item.category.siblings, :id, :name, class:"serect_field"

//省略

items_edit.js
こちらは、出品機能のjsをコピーしたものです。

$(document).on('turbolinks:load', ()=> {
  function appendOption(category){
    var html = `<option value="${category.id}">${category.name}</option>`;
    return html;
  }
  function appendChildrenBox(insertHTML){
    var childSelectHtml = "";
    childSelectHtml = `<div class="category__child" id="children_wrapper">
                        <select id="child__category" name="item[category_id]" class="serect_field">
                          <option value="">---</option>
                          ${insertHTML}
                        </select>
                      </div>`;
    $('.append__category').append(childSelectHtml);
  }
  function appendGrandchildrenBox(insertHTML){
    var grandchildSelectHtml = "";
    grandchildSelectHtml = `<div class="category__child" id="grandchildren_wrapper">
                              <select id="grandchild__category" name="item[category_id]" class="serect_field">
                                <option value="">---</option>
                                ${insertHTML}
                              </select>
                          </div>`;
    $('.append__category').append(grandchildSelectHtml);
  }

  $('#item_category_id').on('change',function(){
    var parentId = document.getElementById('item_category_id').value;
    if (parentId != ""){
      $.ajax({
        url: '/items/get_category_children/',
        type: 'GET',
        data: { parent_id: parentId },
        dataType: 'json'
      })
      .done(function(children){
        $('#children_wrapper').remove();
        $('#grandchildren_wrapper').remove();
        var insertHTML = '';
        children.forEach(function(child){
          insertHTML += appendOption(child);
        });
        appendChildrenBox(insertHTML);
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#children_wrapper').remove();
      $('#grandchildren_wrapper').remove();
    }
  });
  $('.append__category').on('change','#child__category',function(){
    var childId = document.getElementById('child__category').value;
    if(childId != "" && childId != 46 && childId != 74 && childId != 134 && childId != 142 && childId != 147 && childId != 150 && childId != 158){
      $.ajax({
        url: '/items/get_category_grandchildren',
        type: 'GET',
        data: { child_id: childId },
        dataType: 'json'
      })
      .done(function(grandchildren){
        $('#grandchildren_wrapper').remove();
        var insertHTML = '';
        grandchildren.forEach(function(grandchild){
          insertHTML += appendOption(grandchild);
        });
        appendGrandchildrenBox(insertHTML);
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#grandchildren_wrapper').remove();
    }
  })
});

現状、既存の親子孫のカテゴリーを残したまま４つめのセレクトボックスが出現してしまいます。

ご教授ください。
よろしくお願い致します。