Question

I’ve got some inputs as below:

<input type="hidden" id="selected_id-1" name="e_id[]" />
<input type="hidden" id="selected_id-2" name="e_id[]" />
<input type="hidden" id="selected_id-3" name="e_id[]" />
<input type="hidden" id="selected_id-4" name="e_id[]" />

I also have buttons for each input which removes that input.

But, when I remove for example the "selected_id-2" input, I would like to update the id’s of the next inputs. So the "selected_id-3" would become "selected_id-2", and the "selected_id-4" – "selected_id-3".

How could I update those id’s?
Pure JavaScript needed, no frameworks.

Answer 1

Depending on your markup, there’s probably a better way to get to all of your inputs, for instance, finding all within a given container, but lacking such information, you could still do something like:

function updateIds() {

   var count = 0;

   var inputs = document.getElementsByTagName('input');
   for(var i = 0; l = inputs.length; i < l; i++) {
      if(inputs[i].name == 'e_id[]') {

         inputs[i].id = 'selected_id-' + (++count);

      }
   }

}