JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<pre>
let oldState = ['a', 'b', 'c', 'd'];
let newState = ['b', 'c', 'e']


foreach item in oldState
  if item in old state does not exist in new state 
    then add index to array of deleted items
  //e.g. deleteItems = [0, 3]

foreach item in newState
  if item in newState does not exist in old state
    then add index to array of added items
    //  e.g. addItems = [2]
    
foreach item in deleteItems in reverse order
   remove corresponding node from nodelist
   
foreach item in addItems 
   add new node to nodeList
</pre>
<ul id="list">
  <li>alpha</li>
  <li>beta</li>
  <li>gamma</li>
  <li>delta</li>
</ul>

<button id="foo">Add list element just after gamma</button>
<button id="bar">remove delta</button>

JavaScript

foo.addEventListener('click', () => {
	const liEl = document.createElement('li');
  liEl.textContent = 'milk shake';
  list.insertBefore(liEl, list.children[3]);
});

bar.addEventListener('click', () => {
	list.removeChild(list.children[4]);
});