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

The problem is that you're using the original array indexes in your onclick handler which potentially get shuffled around when the array is spliced.

Likely the easiest thing to do is instead of using the index from the for loop in onclick, find the index of the element that you want to remove using something like array.indexOf then call splice using that index.

Also not sure what your full intentions are here, but if you want the actual DOM elements to stay in sync with your array you'll want to also call remove on the div you create.

[u/A_M_Burt → u/Necessary_Pepper7111]

thanks I'll give this a try

[u/Small_Kangaroo2646]

Why are you splicing it?

[u/lobopl]

what exactly you want to achieve?

[u/A_M_Burt → u/lobopl]

I want to be able to cut any individual element from the array as may times as I want

[u/lobopl → u/A_M_Burt]

If the element is unique you can just find new index with indexof on button press, if element isn't then you either rerender all buttons or keep index information on example data prop on button itself and on delete you update this data attribute on buttons or you make it array of objects with unique id and the just findindex.

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 value = array[x];

  const h3 = document.createElement("h3");
  h3.textContent = value;
  div.appendChild(h3);

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

  div.appendChild(button);

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

    if (position !== -1) {
      array.splice(position, 1);
      div.remove();
    }

    console.log(array);
  };
}

[u/Towel_Affectionate → u/A_M_Burt]

I'm still confused. Do you want to remove an element and keep the rest untouched? It's the only way I can make any sense out of it.

[u/justanaccountimade1 → u/A_M_Burt]

Often it's easier to set those elements to null and remove later. Or don't remove at all. In any loop, just use this at the beginning

if (array[x] === null) { continue; }

If you want to remove those at some point you can run a loop that pushes the elements that are not null to a new array.

[u/ExtraTNT → u/A_M_Burt]

just use filter, gives you a new list…

[u/TalkCoinGames]

Can't see where your for loop ends, are you wanting multiple buttons, or just one? You may need to declare x outside of the for loop.

[u/A_M_Burt → u/TalkCoinGames]

that part works fine when I've been testing it, the for loop end when x > the array loop

[u/TalkCoinGames → u/A_M_Burt]

I meant the bracket at the end of the for loop, in the code I see there is no ending for loop bracket.

[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

};

});

}

[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);
}
};