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

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>