javascript - 如何删除除一对一之外的所有列表项（jQuery）

Question

因此，我正在寻找一种单击即可删除所有列表项的方法，不是那么难，但是为了给它一些不错的效果，我想让第一个上滑并删除它，一旦第一个被删除，对第二个列表执行相同的操作item 以此类推，直到删除每个列表项。

Answer 1

以下一次按顺序删除列表中的所有项目：

$('button').click(function() {
    var $first = $('#list li:first')
    removeItem($first);
})


function removeItem($el) {
    $el.slideUp(function() {

        var $next = $el.next()
        if ($next.length) {
            removeItem($next)
        }
        $(this).remove()
    })
}

演示：http: //jsfiddle.net/UzPy5/2/

要单独删除可以使用

Answer 2

为所有列表项赋予相同的类，然后调用 $(".yourclass")，它将返回一个数组。然后使用 setInterval (http://www.w3schools.com/js/js_timing.asp) 之类的东西通过该数组，它可以具有您的上滑功能和您的时间。也许您想要滑动（http://api.jquery.com/animate/）或其他一些插件。

Answer 3

递归fadeOut列表中的每个元素。这可以不用 jQuery，但你需要滚动你自己的动画（或使用 CSS 动画）。

function fadeList(list, index) {
  if (index < list.length) {
    list[index].fadeOut(800, function() {
      fadeList(list, i+1);
    });
  }
}

$('#remove-btn').on('click', function(e) {
  fadeList($('#my-list li'),0);
 });