解決したいこと

jQueryを使って、条件に合わせて表示・非表示にしたい
(画像を10枚投稿すると投稿ボタンは消えて、実際に投稿された画像を削除すると、再び投稿ボタンが出現する様にしたい)

現状

現在、フリマサイトの出品ページを実装中です。
出品物の画像を10枚まで投稿出来て、１０枚になると投稿ボタンが消えて投稿出来なくなります。
しかし、元々投稿されている画像を削除して全部で9枚になった際に投稿ボタンが出現しないため、他の投稿ができない。

試したこと

if文を追加して１０枚以下の場合、出現させる様にした。

省略
if (num == 10){
        $('.photo_space').css('display', 'none')   
      }
      if (num < 10){
        $('.photo_space').css('display', 'block')   
      }
省略

コード記述

new.html.haml

省略

.new_page_main
    .new_page_main__index
      = form_with(url: products_path, local: true) do |form|
        .new_page_main__photo
          %span.label_title 
            出品画像
          %span.required 必須
          %p.upload_limit 最大10枚までアップロードできます
          #image-box-1
            .item-num-0#image-box__container
          %div.photo_space
            ドラッグ&ドロップまたはクリックしてファイルをダウンロード
            .file__box
              = form.fields_for :product_photos do |m|
                = m.label :photo, class: "form-image" do
                  = m.file_field :photo, type: 'file', name: "item[images_attributes][][image_url]", value:"", style: "display:none", id:"img-file"
                  %label{for: "img-file"}
                    %i.fas.fa-camera

省略

product_new.js


// プレビュー機能

$(function(){
  var dataBox = new DataTransfer();
  var file_field = document.querySelector('input[type=file]')
  $('#img-file').change(function(){
    var files = $('input[type="file"]').prop('files')[0];
    $.each(this.files, function(i, file){
      var fileReader = new FileReader();
      dataBox.items.add(file)
      file_field.files = dataBox.files
      var num = $('.item-image').length + 1 + i
      fileReader.readAsDataURL(file);
      if (num == 10){
        $('.photo_space').css('display', 'none')   
      }
      if (num < 10){
        $('.photo_space').css('display', 'block')   
      }
      fileReader.onloadend = function() {
        var src = fileReader.result
        var html= `<div class='item-image' data-image="${file.name}">
                    <div class=' item-image__content'>
                      <div class='item-image__content--icon'>
                        <img src=${src} width="114" height="80" >
                      </div>
                    </div>
                    <div class='item-image__operetion'>
                      <div class='item-image__operetion--delete'>削除</div>
                    </div>
                  </div>`
        $('#image-box__container').before(html);
      };
      $('#image-box__container').attr('class', `item-num-${num}`)
    });
  });
  $(document).on("click", '.item-image__operetion--delete', function(){
    var target_image = $(this).parent().parent()
    var target_name = $(target_image).data('image')
    if(file_field.files.length==1){
      $('input[type=file]').val(null)
      dataBox.clearData();
    }else{
      $.each(file_field.files, function(i,input){
        if(input.name==target_name){
          dataBox.items.remove(i) 
        }
      })
      file_field.files = dataBox.files
    }
    target_image.remove()
    var num = $('.item-image').length
    $('#image-box__container').show()
    $('#image-box__container').attr('class', `item-num-${num}`)
  })
});