jQuery : Re-index order after removing dynamically added items

Question

I am creating div blocks dynamically with item ids, label ids. While creating it is working as expected.

Fiddle

What I want is : after deleting Row 2, remaining items should be re-order as below :

• Row lable text should be read as Row 1, Row 2, Row 3, Row 4 etc... instead of Row 1, Row 3, Row 4
• Input values should read as Input number 1, Input number 2, Input number 3, Input number 4 instead of Input number 1, Input number 3, Input number 4 etc...
• Remove anchor tag ids should read as removeItem-1, removeItem-2, removeItem-3, removeItem-4 etc... instead of removeItem-1, removeItem-3, removeItem-4

Where as, after deleting it is not working as expected.

var counter=1;
$("#addNewItem").click(function(){
  $('<div class="input-row"><span>Row '+counter+'</span> <input type="text" value="Input number '+counter+'"><a href="javascript:;" class="remove-row" id="removeItem-'+counter+'">Remove</a></div>').appendTo('#inputContainers');
  counter++;
});

jQuery(document).on('click', '.remove-row', function(){
  jQuery(this).closest('.input-row').remove();
})

.rp-container{padding:10px 10px 0 10px;background:f3f3f3;width:500px;margin:20px auto;border:1px solid #cecece;}
.input-row{padding:5px;margin-bottom:10px;}
.input-row:nth-child(odd){background-color:#efefef;}
#inputContainers{margin-top:15px;}
#remove-row{margin-left:5px;}
input[type="text"]{margin:0 10px;}
#addNewItem{display:block;text-align:right;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="rp-container">
  <a href="javascript:;" id="addNewItem">+ Add new</a>
  <div id="inputContainers"></div>
</div>

Answer 1

You can simply use one renumbering function on both addition and removal of a row. This will keep everything numbered correctly from a central function, and you don't need to manually duplicate this job on creation of a new row, as you are now.

$("#addNewItem").click(function() {
    $('<div class="input-row"><span></span> <input type="text"><a href="javascript:;" class="remove-row">Remove</a></div>').appendTo('#inputContainers');
    renumberRows();
});

$('#inputContainers').on('click', '.remove-row', function() {
    $(this).closest('.input-row').remove();
    renumberRows();
})

function renumberRows() {
    let n;
    $('#inputContainers .input-row').each(function(i) {
        n = i + 1;
        $(this).find('span').text('Row ' + n);
        $(this).find('input').attr('placeholder', 'Input number ' + n);
        $(this).find('a').attr('id', 'remoteItem-' + n);
    })
}

I would also suggest you use the placeholder attribute on your inputs, because with all the solutions here your input values will otherwise get overwritten every time you change the rows. With placeholder you are providing the prompt for the user, but not messing with what they actually enter in the inputs fields.

Demo Here

Answer 2

You don't need any counter. Just rearrange the numbers dynamically, like this:

$("#addNewItem").click(function(){
  $('<div class="input-row"><span>Row '+ ($('.input-row').length + 1) +'</span> <input type="text" value="Input number '+ ($('.input-row').length + 1) +'"><a href="javascript:;" class="remove-row" id="removeItem-' + ($('.input-row').length + 1) + '">Remove</a></div>').appendTo('#inputContainers');
});

jQuery(document).on('click', '.remove-row', function(){
  jQuery(this).closest('.input-row').remove();
  $('.input-row').each(function(i){
     $(this).find('span').html('Row ' + (i+1));
     $(this).find('input').val('Input number ' + (i+1));
     $(this).find('a').attr('id','removeItem-' + (i+1));
  });
})

.rp-container{padding:10px 10px 0 10px;background:f3f3f3;width:500px;margin:20px auto;border:1px solid #cecece;}
.input-row{padding:5px;margin-bottom:10px;}
.input-row:nth-child(odd){background-color:#efefef;}
#inputContainers{margin-top:15px;}
#remove-row{margin-left:5px;}
input[type="text"]{margin:0 10px;}
#addNewItem{display:block;text-align:right;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="rp-container">
  <a href="javascript:;" id="addNewItem">+ Add new</a>
  <div id="inputContainers"></div>
</div>

Answer 3

You can create some function to reset values of your divs element. So, whenever remove-row is clicked first decrement the counter by 1 so that next time you click on add new it will start from correct value .Then , call your function to reset values.Inside this function you can loop through input-row using each loop then use .find method to get element which you need to change and add new value to your element using .text() and .val().

Demo Code :

var counter = 1;
$("#addNewItem").click(function() {
  $('<div class="input-row">Row <span>' + counter + '</span> <input type="text" value="Input number ' + counter + '"><a href="javascript:;" class="remove-row" id="removeItem-' + counter + '">Remove</a></div>').appendTo('#inputContainers');
  counter++;
});

jQuery(document).on('click', '.remove-row', function() {
  jQuery(this).closest('.input-row').remove();
  counter--; //decremnt counter
  reset_values(); //call this rset values
})

function reset_values() {
  var count = 1;
  //loop through all divs
  $("#inputContainers > .input-row ").each(function() {
    $(this).find("span").text(count); //set new count to span
    $(this).find("input").val("Input number " + count); //set value
    $(this).find("a.remove-row").attr("id", "removeItem-" + count); //set id
    count++; //increment count
  })


}

.rp-container {
  padding: 10px 10px 0 10px;
  background: f3f3f3;
  width: 500px;
  margin: 20px auto;
  border: 1px solid #cecece;
}

.input-row {
  padding: 5px;
  margin-bottom: 10px;
}

.input-row:nth-child(odd) {
  background-color: #efefef;
}

#inputContainers {
  margin-top: 15px;
}

#remove-row {
  margin-left: 5px;
}

input[type="text"] {
  margin: 0 10px;
}

#addNewItem {
  display: block;
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rp-container">
  <a href="javascript:;" id="addNewItem">+ Add new</a>
  <div id="inputContainers"></div>
</div>

Answer 4

If i understand this question properly then You just need to call that method again where you are listing this rows.

jQuery(document).on('click', '.remove-row', function(){
  jQuery(this).closest('.input-row').remove();
  jQuery(this).closest().reload();
})