如何删除所有的列表项,但一个对一个(jQuery)

How to remove all list items but one for one (jQuery)

本文关键字:一个 jQuery 何删除 删除 列表      更新时间:2023-09-26

所以我正在寻找一种方法来删除所有的列表项与点击,不是那么难,但给它一些不错的效果,我想让第一个滑起并删除这个,一旦第一个是删除做同样的第二个列表项,依此类推,直到每个列表项被删除。

下面的语句一次依次删除列表中的所有项:

$('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/

要单独删除可以使用

为所有列表项赋予相同的类,然后调用$(".yourclass"),它将返回一个数组。然后使用setInterval (http://www.w3schools.com/js/js_timing.asp)来遍历这个数组它可以有你的滑升功能和计时功能。也许滑动你想(http://api.jquery.com/animate/)或其他插件。

递归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);
 });