javascript - jQuery 动态删除 HTML 元素

Question

这里有 4 个列表项

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>

我想从服务器更新项目，所以我写了 AJAX 调用。

$.ajax({
    ....
    $('ul').append('new 4 items from server');
});

AJAX 调用后的项目

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>new1</li>
    <li>new2</li>
    <li>new3</li>
    <li>new4</li>
</ul>

所以总项目数是 8。现在我想保留最后 5 个项目Fourth, new1...new4并删除剩余的项目。我怎样才能做到这一点？

Answer 1

您可以使用:lt(index)选择器。

$('ul li:lt(3)').remove();

如果您只想保留li可以使用的最后五个元素eq和prevAll方法：

$('ul li').eq(-5).prevAll().remove();

或者在添加新元素之前删除除最后一个之外的所有列表元素。