Question

I have a list of inputs generated by jQuery :

<input type='text' name='field["+ j++ +"]' />
<input type='file' name='field["+ j++ +"]' />
<textarea name='field["+ j++ +"]' value='' />
<textarea name='field["+ j++ +"]' value=''/>

j++ increment when the user add a new input field and it finally look like this :

<input type='text' name='field[0]' />
<input type='file' name='field[1]' />
<textarea name='field[2]' value='' />
<textarea name='field[3]' value=''/>

Now the user has the possibility to delete a field with a button, example : if I deleted the field[2] it results this :

<input type='text' name='field[0]' />
<input type='file' name='field[1]' />
<textarea name='field[3]' value=''/>

The problem is that the incremented fields are no more suitable later because instead of a list like 0,1,2,3… I have 0,1,3…

I just want to change the number attribute of fields after the one which has been deleted to fit with others incremented fields

Another thing : the user can drag and drop fields to change the order. So if 1 field is deleted the field right after must take its number place and so on

The code to delete a field :

$("#deletebtn").live("click", function(){
  $(this).parent("li").remove();
});

Any help would be very appreciated.

Answer 1

Add a common class name to all elements using the ordering:

<input type='text' name='field[0]' class='dynamic-order' />
<input type='file' name='field[1]' class='dynamic-order' />
<textarea name='field[2]' value='' class='dynamic-order' />
<textarea name='field[3]' value='' class='dynamic-order' />

Then after an element is removed, iterate over the fields and set new index:

$("#deletebtn").live("click", function(){
  $(this).parent("li").remove();
  $( ".dynamic-order" ).each(
    function( index ) {
    this.name = "field["+index+"]";
    }
  );
});

edit: I found some problems with your jsfiddle, here is the fixed version:

http://jsfiddle.net/ZKFHH/1/

For some reason the names don’t always show the most recent value, you have to check the property for it.