删除添加的 div 会导致计数器减少，接下来的 div 应该按照顺序重命名

Question

点击添加按钮，我可以在订单中添加 7 divs。当我尝试删除中间的 div 时，接下来的 divs 应该是 renamed/updated 按照顺序。

我的HTML

<div class="container">
  <div class="row">
    <div id="driver<%=i%>" class="panel panel-default knowledge">
      <div class="panel-heading2">
        <h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse<%=i%>" aria-expanded="false">
          <a class="accordion-toggle driver-title<%=i%>">Driver <%=i%></a>
          <div class="pull-right"><span class="glyphicon glyphicon-plus"></span></div>
        </h4>
      </div>
      <div id="collapse<%=i%>" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <div class="col-sm-12 col-md-12 col-lg-12">                     
            <div class="gap gap-mini"></div>
            <div class="form-group">
              <label class="col-sm-4 control-label">Full Name</label>
              <div class="col-sm-6">
                <input type="text" id="drname<%=i%>" name="drname"  class="form-control" placeholder="Full Name">
              </div>
            </div>
            <div class="remove_wrap_but">
              <a href="javascript:void(0)" class="btn btn-yellow" id="<%=i%>" onclick="removeValueItem(this.id)">- remove driver</a>
            </div>
          </div>
        </div>                   
      </div>
    </div>
  </div>
</div>

我将此内容循环 7 次，以便我可以按顺序添加 divs 7 次，例如 1 2 3 4 5 6 7。

我的javascript代码如下

var valueItemCount = 2;
  if($('#hdItemCount').val()!='2'){
    valueItemCount =$('#hdItemCount').val();
  }
  var isRemove = false;
  var isAdded = false;
  $('#hdItemCount').val(valueItemCount);

  function addValueItem() {
      //alert(isRemove);
      //$('#errmessage').html("");
      console.log("valueItemCount addValueItem   : "+valueItemCount);
      console.log("isRemove    : "+isRemove);
      if(valueItemCount <8) {
        if (isRemove && !isAdded) ++valueItemCount;
        // alert(valueItemCount);
        $('#driver' + valueItemCount).show();
        ++valueItemCount;
        $('#hdItemCount').val(valueItemCount);
        isAdded = true;
      } else {
        //$('#errmessage').html("Maximm Limit Reached");
      }
      // alert(isAdded);
      console.log("isAdded    : "+isAdded);
  }

  function removeValueItem(cnt) {
    if($('#hdItemCount').val()!='2'){
      valueItemCount =$('#hdItemCount').val();
    }
    if (isAdded && !isRemove) {--valueItemCount;}
    alert(cnt);
    console.log(" removeValueItem cnt    : "+cnt);
    console.log("valueItemCount   removeValueItem : "+valueItemCount);
    var count=Number(cnt)+1
    //alert('count1111'+count);
    $('#driver' + cnt).hide();
    if (isAdded && isRemove) {  --valueItemCount; }
    $('#hdItemCount').val(valueItemCount);
    //alert(count);
    console.log("count   : "+count);
    var i;
    for (i = count; i <8; i++) {
      var j=i-1;
      $('#'+i).attr('id',j);
      $('#driver' + i).attr('id','driver'+j);
      $('.driver-title' + i).text('Driver '+j);
    }
    isRemove = true;
    console.log(" isRemove remove    : "+isRemove);
    console.log(" isAdded remove    : "+isAdded);
    if (valueItemCount == 2) {
      isRemove = false;
      isAdded = false;
    }
  }
  if($('#hdItemCount').val()!='2'){
      valueItemCount =$('#hdItemCount').val();
  }
  var itemcnt =  '<%=cntvalue%>';
  for(var i=valueItemCount;i<=8;i++){
      $('#driver'+i).hide();
  }
  for (var i=1;i<valueItemCount;i++){
      console.log("valueItemCount   : "+valueItemCount);
      $('#driver'+i).show();
     $('#hdItemCount').val(valueItemCount);
  }

使用此代码，我可以将 divs 添加到 7，这是正确的。当我尝试在订单之间删除一个特定的 div 时，随后的 div 被重命名但后来，我无法进一步添加/删除。删除只工作一次。

谁能帮忙解决这个问题。

Answer 1

点击添加图标最多可以添加7个驱动程序
删除任何驱动程序都会删除特定驱动程序，从而重新排序所有 ID。
删除每个驱动程序，最后会space添加另一个驱动程序，这样它们的总数不会超过 7；

function addValueItem() {
  if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length < 7) {
    var templateDiv = $('.driver-template').clone(true);
    templateDiv.removeClass('driver-template hidden').addClass('container driverContainer');
    templateDiv.clone(true).insertAfter($('div.driverContainer:last'));
    reAssignIDs();
  }
}

function removeValueItem(elem) {
  if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length == 1) {
    addValueItem();
  }
  $(elem).closest('div.driverContainer').remove();
  reAssignIDs();
}

function reAssignIDs() {
  var Index = 1;
  $('div.driverContainer div.knowledge[id*=driver]').each(function() {
    if (!$(this).hasClass('hidden')) {
      $(this).attr('id', 'driver' + Index);
      $(this).find('h4').attr('data-target', '#collapse' + Index);
      $(this).find('h4 a').text('Driver ' + Index);
      $(this).find('div[id*=collapse]').attr('id', 'collapse' + Index);
      $(this).find('input[id*=drname]').attr('id', 'drname' + Index);
      $(this).find('.remove_wrap_but a.btn-yellow').attr('id', Index);
      Index++;
    }
  });
  $(".glyphicon.glyphicon-plus").addClass('hidden');
  if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length < 7) {
    $(".glyphicon.glyphicon-plus:last").removeClass('hidden');
  }
}
$(".panel-title").click(function(e) {
  if (!$(e.target).is('.glyphicon.glyphicon-plus'))
    $(this).closest('.row').find('.panel-collapse').toggleClass('collapse');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="driver-template hidden">
  <div class="row">
    <div id="driver" class="panel panel-default knowledge">
      <div class="panel-heading2">
        <h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse" aria-expanded="false">
          <a class="accordion-toggle driver-title1">Driver X</a>
          <div class="pull-right"><span class="glyphicon glyphicon-plus" onclick="addValueItem()"></span></div>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="gap gap-mini"></div>
            <div class="form-group">
              <label class="col-sm-4 control-label">Full Name</label>
              <div class="col-sm-6">
                <input type="text" id="drname" name="drname" class="form-control" placeholder="Full Name">
              </div>
            </div>
            <div class="remove_wrap_but">
              <a href="javascript:void(0)" class="btn btn-yellow" id="" onclick="removeValueItem(this)">- remove driver</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container driverContainer">
  <div class="row">
    <div id="driver1" class="panel panel-default knowledge">
      <div class="panel-heading2">
        <h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1" aria-expanded="false">
          <a class="accordion-toggle driver-title1">Driver 1</a>
          <div class="pull-right"><span class="glyphicon glyphicon-plus" onclick="addValueItem()"></span></div>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="gap gap-mini"></div>
            <div class="form-group">
              <label class="col-sm-4 control-label">Full Name</label>
              <div class="col-sm-6">
                <input type="text" id="drname1" name="drname" class="form-control" placeholder="Full Name">
              </div>
            </div>
            <div class="remove_wrap_but">
              <a href="javascript:void(0)" class="btn btn-yellow" id="1" onclick="removeValueItem(this)">- remove driver</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

*请注意，我已经使用 class 'driver-template' 创建了一个模板 div。在单击“Add”选项时，我只是在最后插入了这个模板，并重命名了所有 ID。您甚至可以最初使用循环保留 7 个驱动程序。删除和添加等进一步工作将使用此逻辑相应地工作。*

如果这仍然不是您所要求的，请解释更多。

删除添加的 div 会导致计数器减少，接下来的 div 应该按照顺序重命名

Removal of added div should result in decrease of counter and next subsequent divs should be renamed as per the order

javascript

jquery

counter

show-hide