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(); 

Или перед добавлением новых элементов удалить все элементы списка, за исключением последнего.