Maybe a daft experiment.
There was a question on here this morning which promptly disappeared.
The OP had a form with an ordered list of form groups, each with a delete button. The class names in the form were in sequential order.
e.g.
<ol type='a'>
<li><input type='text' class='something1'><button>delete</button></li>
<li><input type='text' class='something2'><button>delete</button></li>
<li><input type='text' class='something3'><button>delete</button></li>
</ol>
The OP wanted to be able to delete an item, keeping the class names in sequential order i.e. no gaps in the numbers
e.g.
<ol type='a'>
<li><input type='text' class='something1'><button>delete</button></li>
<li><input type='text' class='something2'><button>delete</button></li> <!-- delete me -->
<li><input type='text' class='something3'><button>delete</button></li>
</ol>
should not result in this
<ol type='a'>
<li><input type='text' class='something1'><button>delete</button></li>
<li><input type='text' class='something3'><button>delete</button></li>
</ol>
but this instead
<ol type='a'>
<li><input type='text' class='something1'><button>delete</button></li>
<li><input type='text' class='something2'><button>delete</button></li>
</ol>
I have been looking into observables (is that a pun?), and this was an excuse for me to familiarise myself with Mutation Observers
html
<form>
<fieldset id='set1'>
<legend>MutationObserver Experiment</legend>
<ol type='A'>
<li>
<input type='text' class='color1' value='item1'>
<button class='delete'>Delete</button>
</li>
<li>
<input type='text' class='color2' value='item2'>
<button class='delete'>Delete</button>
</li>
<li>
<input type='text' class='color3' value='item3'>
<button class='delete'>Delete</button>
</li>
<li>
<input type='text' class='color4' value='item4'>
<button class='delete'>Delete</button>
</li>
<li>
<input type='text' class='color5' value='item5'>
<button class='delete'>Delete</button>
</li>
<li>
<input type='text' class='color6' value='item6'>
<button class='delete'>Delete</button>
</li>
</ol>
</fieldset>
</form>
javascript
window.addEventListener('DOMContentLoaded', () => {
const mutationHandler = ([ record ]) => {
// assign previous element to deleted element as start point
let element = record.previousSibling
// Loop through the following elements/items
while(element = element.nextElementSibling) {
const input = element.querySelector('input[type="text"]')
input.className = input.className
// decrement color number
.replace(/color(\d+)/, (_, num) => `color${parseInt(num, 10) - 1}`)
}
}
const observer = new MutationObserver(mutationHandler)
observer.observe(
document.querySelector('#set1 ol'),
{ childList: true }
)
const deleteButtons = document.querySelectorAll('.delete')
const removeItem = ({ target }) => { target.parentNode.remove() }
deleteButtons.forEach(elem => elem.addEventListener('click', removeItem))
})
I don’t tend to do well with these posts, but any feedback or information is welcome.
As an aside, I don’t know if this is of interest to others, but the bright individual in this series of videos looks into hand rolling a mini rxjs framework as a study into observables and reactive programming. Thought it was quite interesting. 
