How to display an array in a div?

Question

JavaScript

Hey!
There is such an example - https://jsfiddle.net/b2z3L760/1/

An array of some data

const arr = [
  {id: 850, name: 'hello'},
  {id: 851, name: 'world'},
  {id: 852, name: 'hello'},
  {id: 853, name: 'john'},
  {id: 854, name: 'putin'},
];

Next, we render these elements in .list

spoiler

arr.forEach(item => {
  $('.list').append(`
  	<span class="green" id="${item.id}">${item.name} id:${item.id}</sapn>
  `);
});

Then we update the array, delete some entry and add a new one.

spoiler

arr.splice(3, 1);
arr.push({id: 888, name: 'rov'});

Now we need to remove unnecessary elements on the page and add new ones, so that the id in the array matches the id of the elements in the list. How can I do that ? Only one idea came to my mind, this is to completely clear the list and re-display everything. But I think there is a much better option. I would be grateful and happy to help! Peace to you.

Answer 1

By the same principle, you can make an addition. And neatly splice mutates the original array, google what it means, it can be critical