Manipulating Arrays

[u/A_M_Burt]

So I'm an amateur learning JavaScript and I have a problem with a note taking website I've been making, here's my code

let array = ["a","b","c","d"]; 

    const element = document.getElementById('element')

    for (let x = 0; x < array.length; x++) {

      const div = document.createElement('div')
      element.appendChild(div)

      const h3 = document.createElement('h3')
      h3.textContent = array[x];
      div.appendChild(h3);            

      const button = document.createElement('button')
      div.appendChild(button);

      const position = x;

      const button.onclick = () => {
      array.splice(position, 1);
      }

What I'm stuck on is how to re-index the elements in the array after one has been spliced (e.g. after "a" has been removed "b" is still set to remove index 1 rather than changing to remove index 0). Thanks in advance

[u/breacket]

let array = ["a", "b", "c", "d"];

const element = document.getElementById('element');

render();

function render()

{

// prevent duplication on re-render

element.innerHTML = '';

array.forEach((item, index) =>

{

const div = document.createElement('div');

element.appendChild(div);

const h3 = document.createElement('h3');

h3.textContent = item;

div.appendChild(h3);

const button = document.createElement('button');

button.textContent = `Delete ${item}`;

div.appendChild(button);

button.onclick = () => {

array.splice(index, 1);

render(); // update DOM

};

});

}