Вот так решил, если кому-то интересно, но порожнему, Вы все еще можете предложить свой вариант и я буду рад и благодарен Вам!
demo:
https://jsfiddle.net/s4fqpLgc/ (если нажать на кнопку, то добавляется элемент с рандомным id, раньше если бы мы добавили еще один, то предыдущий элемент изменился так-как был-бы перендер всех элементов, но с данным решением - нет
js
const arr = [
{id: 850, name: 'hello'},
{id: 851, name: 'world'},
{id: 852, name: 'hello'},
{id: 853, name: 'john'},
{id: 854, name: 'putin'},
];
function render() {
// .in-cart - класс модификатор, им мы будем помечать элементы которые уже имеются на странице
//сперва удаляем класс у всех элементов
$('.item').removeClass('in-cart');
arr.forEach(item => {
//помечаем элементы которые уже были отрендерены
$(`.item[data-id="${item.id}"]`).addClass('in-cart');
//если элемента нет, то рендерим его
if($(`.item[data-id="${item.id}"]`).length == 0) {
$('.list').append(`
<span class="item in-cart" data-id="${item.id}">${item.name} id:${item.id}</sapn>
`);
}
});
//проходим по всем **не** помеченным элементам, так-как они лишние - удаляем
$('.item').each(function(){
if(!$(this).hasClass('in-cart')) {
$(this).remove();
}
});
}
render();
arr.splice(3, 1);
arr.push({id: 888, name: 'rov'});
render();
console.log(arr)
$('.add').click(function(){
var id = Math.floor(Math.random() * 500);
arr.push({id: id, name: 'new ' + id});
render();
});
console.log(arr)
В итоге мы рендерим только новые элементы и избавляемся от надобности рендерит элементы снова. Это особенно помогает, когда у вас там инпуты, которы вы заполнили, потом добавили еще один элемент, а из-за того что оно рендерится снова все инпуты сбрасываются.
Ответ
WapSter в целом тоже решает проблему, но я решил изменить логику немного.
