$（'。photos ul li'）。length在我注入照片之前输出0，当它们出现时输出5，但是当我删除它们时仍然显示5

Question

when i click on the removePhotos button it will output the photos li length. initially when the DOM loads their are no photos so it would output 0 and when i click show photos i use ajax to inject my photos. after i insert my photos and click the removePhotos button it outputs 5 which is the number of photos i have but the problem is when i remove the photos and then click the removePhotos button it outputs 5 still when it should be outputting 0. any suggestions on how to fix this?

my html

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

my 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

Pass into the jQuery fadeOut function a callback which does a $(this).remove()

Your problem is, that fadeOut just hides your photos, but they are still present in the DOM.