javascript - $ ('.photos ul li' ).length 在我注入(inject)照片之前输出 0 并在它们出现时输出 5 但当我删除它们时它仍然显示 5

Question

当我单击“removePhotos”按钮时，它将输出长度为 li 的照片。最初，当 DOM 加载它们时，它们没有照片，因此它会输出 0，当我单击“显示照片”时，我使用 ajax 来注入(inject)我的照片。在我插入照片并单击“removePhotos”按钮后，它会输出 5，这是我拥有的照片数量，但问题是当我删除照片，然后单击“removePhotos”按钮时，它应该输出 0，但它仍然输出 5。有关的任何建议如何解决这个问题？

我的html

    <div id="paris">
     <h1>CRAPPY CHEESE</h1>
     <button>Get Paris Photos</button>
     <span>Remove Photos</span>
     <ul class="photos">
     </ul>
    </div>

我的 JavaScript

    function Tour(el) {
      var tour = this;
      this.el = el;

     this.hidePhotos = function() {
      alert($('.photos ul li').length);
      $('.photos').fadeOut();
     }

     this.fetchPhotos = function() {
       $.ajax('photos.html', {
          data: {location: $("#tour").data(this.el)},
          success: function(response) {
           this.el.find('.photos').html(response).fadeIn();
          },
          context: tour,
          error: function() {
            this.el.find('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>');
          },
          timeout: 3000,
          beforeSend: function() {
            this.el.addClass('is-fetching');
          },
          complete: function() {
            this.el.removeClass('is-fetching');
          }
        });
      };
   var kirt = this.el.on('click.showPhotos', 'button', this.fetchPhotos);
   var pooh = this.el.on('click.removePhotos', 'span', this.hidePhotos);
  }
  $(document).ready(function() { 
     var paris = new Tour($('#paris'));
  });

Answer 1

向 jQuery fadeOut 函数传递一个执行 $(this).remove() 的回调

你的问题是，fadeOut 只是隐藏了你的照片，但它们仍然存在于 DOM 中。