Deleting any element, the reassigning the count value

Question

Sorry about the cryptic title, it's hard to describe!

I am using the following script to add a row to my form when a button is clicked:

  $(document).ready(function() {
      $('#btnAdd').click(function() {
     var num     = $('.clonedInput').length;
     var newNum  = new Number(num + 1);

     var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

     newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
     $('#input' + num).after(newElem);
        $('#btnDel').attr('disabled','');

        if (newNum == 5)
         $('#btnAdd').attr('disabled','disabled');
      });

      $('#btnDel').click(function() {
     var num = $('.clonedInput').length;

     $('#input' + num).remove();
     $('#btnAdd').attr('disabled','');

     if (num-1 == 1)
      $('#btnDel').attr('disabled','disabled');
      });

      $('#btnDel').attr('disabled','disabled');
  });

This works absolutely fine, but it's not very user-friendly that you can only delete the last added row. Say I want to delete a row added earlier on, I would have to delete everything I'd done since then.

How can I delete any row, and at the same time reassign the count value to the other rows, so that the count is still sequential (i.e. Row1, Row2, Row3 etc, rather than Row1, Row5, Row8)?

Answer 1

I had to do a similar thing a while ago

Essentially I got the number of the deleted row ie. Row3 and then looped through the remaining rows updating their values. so Row4 becomes Row3 etc.

I used something like this

    var last_val = //get the last value of the rows so you know when to stop

    //knock off the Row part of the id and parses as an integer
    var pos = parseFloat(row_id.slice(3))

    var next_val = position+1;
    var prev_val = position;

    while(next_val<=last_val){
     next_selector = "#Row"+next_val;
     prev_id = "Row"+prev_val;
     $(next_selector).attr("id",prev_id);
     next_val++;
     prev_val++;
    }

There may be a better way to do this, but this worked for me for a cms allowing pages to be deleted from the middle of a list which then updated the row numbering.

Answer 2

I recommend that you don't explicitly set an id to the elements. Instead you can use jQuery powerful selectors to get the position of an element.

This is an example, based on a common html structure. Post your own html to give you a more details.

  $('.btnDel').click(function() {
    var num = $(this).parent().prevAll().size();

    // this points to delete link.
    // The previous element is the content element
    $(this).prev().remove();

    $('#btnAdd').attr('disabled','');

    if (num-1 == 1)
            $(this).attr('disabled','disabled');
  });

<div class='elem'>
  <span class='content'>....</span>
  <a class='btnDel' href='#'>Delete</a>
</div>

Answer 3

Why are you even adding IDs to the rows? Remember that 83% of jQuery is "Query" - use the selectors to get to the elements you want.

Answer 4

I posted a demo here (it doesn't look good in IE because of the float, but I just wanted to post this as an example to help). I don't know how you handle gathering your form data, so I did include renumbering the cloned input IDs.

CSS

form { width: 400px; margin: 0 auto; line-height: 30px; }
input { float: right; }

HTML

<form>
<div class="main">
 Name: <input type="text" /><br>
 Title: <input type="text" /><br>
 Company: <input type="text" /><br>
 Location: <input type="text" /><br>
</div>
Additional information: <input id="btnAdd" type="button" value="Add More"/>
<div id="addFields"></div>
</form>

Script

$(document).ready(function(){
 $('#btnAdd').click(function(){
    // inputs reversed because of the float right
  var newInput = '<div class="clonedInput">Additional Field <span></span>: ' +
   '<input type="button" class="btnDel" title="Delete this field" value="X"><input type="text" /></div>';
  $(newInput).appendTo('#addFields');
  // disable add button if there are 5 additional fields
  if ($('.clonedInput').length == 5) {
   $('#btnAdd').attr('disabled','disabled');
  }
  renumber();
 })
 // Delete input field
 $('.btnDel').live('click',function(){
  $('#btnAdd').attr('disabled','');
  $(this).parent().remove();
  renumber();
 })
})
// This function adds the additional field number and ID for each clonedInput field
function renumber(){
 $('.clonedInput').each(function(i){
  $(this).find('span').html('#' + (i+1));
  // the code below will change the ID of the input, in case you collect your data based on the ID.
  $(this).find('input[type=text]').attr('id', 'input' + (i+1));
 })
}