删除后从最高编号开始动态构建输入字段？

Question

我应该从那里用户可以添加新行。我的逻辑工作正常，并且所有新字段都具有唯一的id's和names，但是当我删除除最后一行以外的任何其他行时，都会出现问题。这是我的代码示例：

$("#add_row").on('click', addRow);

function addRow() {
  var index = $(".data-list").children('div').length + 1;
  console.log(index);

  $('.data-list').append(
    '<div class="form-group required data-item">' +
    '<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
    '<div class="row">' +
    '<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
    '<select class="form-control" name="frm_column' + index + '" id="frm_column' + index + '" required>' +
    '<option value="">--Choose--</option>' +
    '<option value="1">Record ID</option>' +
    '<option value="2">Name</option>' +
    '<option value="3">Year</option>' +
    '</select>' +
    '</div>' +
    '<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
    '<div class="input-group">' +
    '<input class="form-control" type="text" name="frm_descr' + index + '" id="frm_descr' + index + '" placeholder="Enter Description" required>' +
    '<span class="input-group-btn">' +
    '<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
    '</span>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>'
  );
};

$(document.body).on('click', '.btn-remove', function() {
  $(this).closest('.data-item').remove();
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="data-section">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="button" class="btn" name="add_row" id="add_row">
                                                        <span class="glyphicon glyphicon-plus-sign"></span> Add Row
                                                    </button>
    </div>
  </div>
  <div class="data-list">
    <div class="form-group required data-item">
      <label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
          <select class="form-control" name="frm_column1" id="frm_column1" required>
            <option value="">--Choose--</option>
            <option value="1">Record ID</option>
            <option value="2">Name</option>
            <option value="3">Year</option>
          </select>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
          <input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
        </div>
      </div>
    </div>
  </div>
</div>

如果我再添加两行（总行数3）并删除第二行，那么下次用户单击Add Row时，索引将从3开始，并且该索引已经存在。我想知道如何解决此问题？从上一个最高的数字开始索引是一种好方法吗？

Answer 1

创建一个变量，您将在其中保留最后一个ID。每次添加一个新的时，我都会在其中添加一个。这样，您将始终获得唯一的ID和名称作为输入。您可以查看以下代码片段以了解我的意思。

$("#add_row").on('click', addRow);
var counter = 1;

function addRow() {
  counter++;
  console.log(counter);
  $('.data-list').append(
    '<div class="form-group required data-item">' +
    '<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
    '<div class="row">' +
    '<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
    '<select class="form-control" name="frm_column' + counter + '" id="frm_column' + counter + '" required>' +
    '<option value="">--Choose--</option>' +
    '<option value="1">Record ID</option>' +
    '<option value="2">Name</option>' +
    '<option value="3">Year</option>' +
    '</select>' +
    '</div>' +
    '<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
    '<div class="input-group">' +
    '<input class="form-control" type="text" name="frm_descr' + counter + '" id="frm_descr' + counter + '" placeholder="Enter Description" required>' +
    '<span class="input-group-btn">' +
    '<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
    '</span>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>'
  );
};

$(document.body).on('click', '.btn-remove', function() {
  $(this).closest('.data-item').remove();
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="data-section">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="button" class="btn" name="add_row" id="add_row">
                                                        <span class="glyphicon glyphicon-plus-sign"></span> Add Row
                                                    </button>
    </div>
  </div>
  <div class="data-list">
    <div class="form-group required data-item">
      <label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
          <select class="form-control" name="frm_column1" id="frm_column1" required>
            <option value="">--Choose--</option>
            <option value="1">Record ID</option>
            <option value="2">Name</option>
            <option value="3">Year</option>
          </select>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
          <input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
        </div>
      </div>
    </div>
  </div>
</div>