How to reset the error number when deleted from list

Question

I'm creating a set of textboxes and some drop downs using jQuery. The add function is working with out any issues.

My problem is with the delete function function works nicely as long as the user deletes one after the other but if the user delete from some where else the number sequence get messed up. Which breaks the 1,2,3,4 ... etc and sets the number which was deleted last.

As an example if the user deletes number 4 out of 7 errors the functions sets the last number as 4 when the user clicks the add button the next number generated will be 5 not the correct last number. I want to rest the rest of the numbers when something get removed from the middle.

I'm storing the last number in a hidden filed called stValue which is getting reset when deleting.

My problem is here I can't get my head around to think of way to reset this when deleting from some where else and then reset the entire error number row numbers when something get removed from the middle. Can you guys help me with this below is my code.

jsFiddle will help to understand better

JQuery:

//Add and remove function for the error text boxes
$(document).ready(function () {
    $(document).on('click','.addRow',function () {
        var div = $(""),
            btnId = $(this).data("bid").match(/\d+/);//Breaks the number from the ID using .match

        div.html(copy()); //Creates a new div container
        $('.error-Column').append(div); //Insert all the HTML into the new div

        $('#addRow_'+btnId).prop("disabled", true);//Disables the add button once clicked.
    });

    //Remove the text filed from the list and resets the error number
    $(document).on('click', '.delRow', function () {
        var //btnId = $(this).data("bid").match(/\d+/),//Breaks the number from the ID using .match
            maxNoList = $('input[class="addRow"]').length,
            errNoList = maxNoList - 1;


        alert(errNoList);


        //btnId = btnId - 1; //Calculates the ID number of the previous button

        $('#addRow_'+errNoList).prop('disabled',false);// Enables the previous add button

        $('#stValue').val(errNoList); //Set the value of stValue when removing the text filed
                                  //So the error numbers will be generated accordingly when Add is clicked again.

        $(this).parent().remove(); //Remove the text row from the list.
    });
});

//HTML function which will be called by the button click event for the add button
function copy() {
    var stNum = document.getElementById("stValue"),
        genNum = (document.getElementById("stValue").value - 1)+2;

    stNum.value = genNum;

    // language=HTML
    return '
' +
        '
' +
        '
' +
        '
'
}

HTML:


  
 
  Error NumberError Name

**UPDATE:**Completely changed the code now it's much more simpler adding the solved answer here so it might help some one in the future.

//Add and remove function for the error text boxes
$(document).ready(function() {
  $(document).on('click', '.addRow', function() {
    var div = $(""),
      btnId = $(this).data("bid").match(/\d+/); //Breaks the number from the ID using .match

    div.html(copy()); //Creates a new div container
    $('.error-Column').append(div); //Insert all the HTML into the new div

    $('#addRow_' + btnId).prop("disabled", true); //Disables the add button once clicked.
  });

  //Remove the text filed from the list and resets the error number
  $(document).on('click', '.delRow', function() {
    var btnId = $("#stValue").val(); //Read the value of stValue

    btnId = btnId - 1; //Deduct 1 from the value to get the last ID

    //Enables the 1st add button if the value equals 1
    if (btnId === 1) {
      $('#addRow_' + btnId).prop('disabled', false);
    }

    $(this).parent().remove(); //Remove the text row from the list.
    resetErrorNo(); //Calls the reset function
  });
});

//Reset the entire error count number index
function resetErrorNo() {
  $(".errorCount").each(function(index, _this) {
    $(this).val(index + 1);
    $("#stValue").val(index + 1);
  });
}

//HTML function which will be called by the button click event for the add button
function copy() {
  var stNum = document.getElementById("stValue"),
    genNum = (document.getElementById("stValue").value - 1) + 2;

  stNum.value = genNum;

  // language=HTML
  return '
' +
    '
' +
    '
' +
    '
'
}



  
    
      Error NumberError Name

Yogen Darji · Accepted Answer

Try with whenever, you delete any row, update all input with new number.

$(".errorCount").each(function(index, _this) {
    $(this).val(index + 1);
});

Full Code

//Add and remove function for the error text boxes
$(document).ready(function() {
  $(document).on('click', '.addRow', function() {
    var div = $(""),
      btnId = $(this).data("bid").match(/\d+/); //Breaks the number from the ID using .match

    div.html(copy()); //Creates a new div container
    $('.error-Column').append(div); //Insert all the HTML into the new div

    $('#addRow_' + btnId).prop("disabled", true); //Disables the add button once clicked.
  });

  //Remove the text filed from the list and resets the error number
  $(document).on('click', '.delRow', function() {
    var //btnId = $(this).data("bid").match(/\d+/),//Breaks the number from the ID using .match
      maxNoList = $('input[class="addRow"]').length,
      errNoList = maxNoList - 1;



    //btnId = btnId - 1; //Calculates the ID number of the previous button

    $('#addRow_' + errNoList).prop('disabled', false); // Enables the previous add button

    $('#stValue').val(errNoList); //Set the value of stValue when removing the text filed
    //So the error numbers will be generated accordingly when Add is clicked again.

    $(this).parent().remove(); //Remove the text row from the list.
    rearrange();
  });
});

function rearrange() {

  $(".errorCount").each(function(index, _this) {
    $(this).val(index + 1);
  });

}

//HTML function which will be called by the button click event for the add button
function copy() {
  var stNum = document.getElementById("stValue"),
    genNum = (document.getElementById("stValue").value - 1) + 2;

  stNum.value = genNum;

  // language=HTML
  return '
' +
    '
' +
    '
' +
    '
'
}



  
    
      Error NumberError Name

How to reset the error number when deleted from list

Answers (1)

Related Questions