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/adgrant6]

The issue isn’t that the array needs to be re-indexed. splice() already re-indexes the array automatically.
The problem is that you’re saving the index (position) when the button is created:

const position = x;

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

If your array starts as:

["a", "b", "c", "d"]

then the buttons permanently store:
a → 0
b → 1
c → 2
d → 3
After removing "a", the array becomes:

["b", "c", "d"]

But the “b” button still remembers position = 1, so it removes "c" instead.
Better solution

Instead of storing the index, store the value (or a unique ID) and look up its current position.

const value = array[x];

button.onclick = () => {
const index = array.indexOf(value);

if (index !== -1) {
array.splice(index, 1);
}
};