从列表中删除时如何重置错误号

Question

我正在使用jQuery创建一组文本框和一些下拉菜单。添加功能正在处理任何问题。

我的问题是删除功能功能很好地工作，只要用户一个接一个地删除，但如果用户从其他地方删除数字序列搞砸了。打破了1,2,3,4 ...等并设置了最后删除的数字。

例如，如果用户删除7个错误中的第4个错误，则当用户单击添加按钮时，函数将最后一个数字设置为4，生成的下一个数字将是5而不是正确的最后一个数字。当某些东西从中间移开时我想休息其余的数字。

我将最后一个号码存储在一个名为stValue的隐藏字段中，该字段在删除时会被重置。

我的问题在这里我无法想到在从其他地方删除时重置此方法，然后在从中间删除某些内容时重置整个错误号行号。你能帮我解决下面的问题吗？

jsFiddle将有助于更好地理解

JQuery的：

//Add and remove function for the error text boxes
$(document).ready(function () {
    $(document).on('click','.addRow',function () {
        var div = $("<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 '<input class="errorCount" size="1" value="'+genNum+'" style="margin-left: 2%" readonly/>\n' +
        '<select class="errorName" style="margin-left: 6%">\n' +
        '<option selected disabled>----- Select Error -----</option>\n' +
        '</select>\n' +
        '<input type="button" class="addRow" id="addRow_'+genNum+'" data-bid="addRow_'+genNum+'" value="Add" />\n' +
        '<input type="button" class="delRow" id="delRow_'+genNum+'" data-bid="delRow_'+genNum+'" value="Delete"/><br />'
}

HTML：

<div id="jType-container">
  <div id="error-Add-Container">
 <div id="error-Column-Headings">
  Error Number<span style="margin-left: 8%">Error Name</span>
 </div>
<div class="error-Column">
<input class="errorCount" size="1" value="1" style="margin-left: 2%"/>
  <input type="hidden" value="1" id="stValue"/>
    <select class="errorName" style="margin-left: 6%">
      <option selected disabled>----- Select Error -----</option>
    </select>
   <input type="button" data-bid="addRow_1" id="addRow_1" class="addRow" value="Add"/>
  </div>
 </div>
</div>

**更新：**现在完全改变了代码，在这里添加已解决的答案要简单得多，这样可能会对将来有所帮助。

//Add and remove function for the error text boxes
$(document).ready(function() {
  $(document).on('click', '.addRow', function() {
    var div = $("<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 '<input class="errorCount" size="1" value="' + genNum + '" style="margin-left: 2%" readonly/>\n' +
    '<select class="errorName" style="margin-left: 6%">\n' +
    '<option selected disabled>----- Select Error -----</option>\n' +
    '</select>\n' +
    '<input type="button" class="addRow" id="addRow_' + genNum + '" data-bid="addRow_' + genNum + '" value="Add" />\n' +
    '<input type="button" class="delRow" id="delRow_' + genNum + '" data-bid="delRow_' + genNum + '" value="Delete"/><br />'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jType-container">
  <div id="error-Add-Container">
    <div id="error-Column-Headings">
      Error Number<span style="margin-left: 8%">Error Name</span>
    </div>
    <div class="error-Column">
      <input class="errorCount" size="1" value="1" style="margin-left: 2%" />
      <input type="hidden" value="1" id="stValue" />
      <select class="errorName" style="margin-left: 6%">
                             <option selected disabled>----- Select Error -----</option>
                         </select>
      <input type="button" data-bid="addRow_1" id="addRow_1" class="addRow" value="Add" />
    </div>
  </div>
</div>

Answer 1

尝试随时删除任何行，使用新号码更新所有输入。

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

完整代码

//Add and remove function for the error text boxes
$(document).ready(function() {
  $(document).on('click', '.addRow', function() {
    var div = $("<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 '<input class="errorCount" size="1" value="' + genNum + '" style="margin-left: 2%" readonly/>\n' +
    '<select class="errorName" style="margin-left: 6%">\n' +
    '<option selected disabled>----- Select Error -----</option>\n' +
    '</select>\n' +
    '<input type="button" class="addRow" id="addRow_' + genNum + '" data-bid="addRow_' + genNum + '" value="Add" />\n' +
    '<input type="button" class="delRow" id="delRow_' + genNum + '" data-bid="delRow_' + genNum + '" value="Delete"/><br />'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="jType-container">
  <div id="error-Add-Container">
    <div id="error-Column-Headings">
      Error Number<span style="margin-left: 8%">Error Name</span>
    </div>
    <div class="error-Column">
      <input class="errorCount" size="1" value="1" style="margin-left: 2%" />
      <input type="hidden" value="1" id="stValue" />
      <select class="errorName" style="margin-left: 6%">
        <option selected disabled>----- Select Error -----</option>
      </select>
      <input type="button" data-bid="addRow_1" id="addRow_1" class="addRow" value="Add" />
    </div>
  </div>
</div>