jquery - Multiple flexslider remove current slide

Question

I'm trying to remove the current slide from a flexslider on a page with multiple sliders who currently share the same class. http://flexslider.woothemes.com/

What it currently does is if I click on the close link to remove the current slide on the 2nd flexslider, it removes the current slide from the 1st flexslider.

I need it to correctly remove the current slide on the respective sliders. Any ideas?

HTML

<!-- flexslider 1 -->
<section class='choices'>
  <ul class='slides'>
    <li class='flex-active-slide'>
       <a class='close'></a>
       content here
    </li>
    <li>
       <a class='close'></a>
       content here
    </li>        
    <li>
       <a class='close'></a>
       content here
    </li>
  </ul>
</section>

<!-- flexslider 2 -->
<section class='choices'>
  <ul class='slides'>
    <li class='flex-active-slide'>
       <a class='close'></a>
       content here
    </li>
    <li>
       <a class='close'></a>
       content here
    </li>
  </ul>
</section>

script

(window).load(function() {

    $('.choices').flexslider({
        animation: "slide",
    });

    var slider = $('.choices').data('flexslider');

    $('.slides .close').click(function(){
         slider.removeSlide(slider.currentSlide);
    });
});

Answer 1

设法找到解决方法， currentSlide 只返回幻灯片索引号。所以它需要更具体的选择器。

$('.choices .close').click(function(){
    var sliderid = $(this).closest(".choices");
    var slider = sliderid.data('flexslider');
    slider.removeSlide(slider.currentSlide);
});