Question

我正在研究jQuery中的“添加更多”功能，其中用户单击“ +”符号，然后将添加额外的div元素组以及每个div的编号，假设用户必须添加多个“ companies” ，点击添加更多按钮company2，company3，company4等。通常，在单击“ +”添加更多公司后，用户还单击“-”符号以删除相应的公司。我的问题是，如果用户删除5个公司增加了5个公司，那么该公司号需要根据当前的公司总数进行更新；如果删除3个公司，则订单号应为1,2,3,4。

//Add Company Script:

var cn=$("#experience_latest_value").val();
$(".add_experience").click(function(){
  var new_experience = '<div class="col-md-12"><div class="col-md-6">
  <div class="form-group"><label class="col-sm-4 control-label">Company:</label>
  <div class="col-sm-8"><input type="text" name="company[]" id="company">
 </div></div></div>';

var new_experience1 = '<div class="row"><a class="pull-right remove_experience btn btn-danger" ><i class="glyphicon glyphicon-remove"></i></a><div class="col-md-12"><h3>Company '+cn+': </h3></div>'+new_experience+'</div>';
$("#experience_latest_value").val(++cn);
$(".append_experience").append(new_experience1);
  
//Remove Company Script:

$('.append_experience').on('click', '.remove_experience', function() {
  $(this).parent().remove();
  var cnum = 2;
  $('.remove_experience.col-md-12>h3').each(function() {
    $(this).val(cnum);
    cnum++;
  });
});

<link rel="stylesheet" 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>
<h2 class="panel-title"><input type="checkbox" name="experience_check" id="experience_check" checked="checked" class="check_cls all_experiences" value="on">
  <label for="experience_check" class="checkc"></label> 
  Experience: 
  <a class="pull-right add_experience  btn btn-success">
    <i class="glyphicon glyphicon-plus"></i>
  </a>
</h2>
<div class="tab-pane active" role="tabpanel" id="step2">
<div class="append_experience">
  <div class="col-md-12">
    <h3>
      <input type="checkbox" name="individual_experience[]" id="individual_experience71" class="check_cls individual_experience" checked>
      <label for="individual_experience71" class="checkc"></label> 
      Company 1: 
    </h3>
  </div>
  <input type="hidden" name="experience_latest_value" id="experience_latest_value" value="">
  
<!-- START: This script added dynamically after click on '+' -->
   <div class="row">
     <a class="pull-right remove_experience btn btn-danger" data-cnumber="3">
       <i class="glyphicon glyphicon-remove"></i>
     </a>
     <div class="col-md-12">
       <h3>Company 2: </h3>
     </div>
      <div class="col-md-12"></div>
    </div>
<!-- END: This script added dynamically after click on '+' -->

</div> <!-- append_experience -->
</div>

所有额外添加的公司将具有“ remove_experience”类，第一家公司则没有“ remove_experience”类。我的代码有什么问题。任何人请协助。谢谢。

Answer 1

请尝试

$('.append_experience').on('click','.remove_experience',function() {
  $(this).parent().remove();
  var cnum = 2;
  $('.remove_experience.col-md-12>h3').each(function(){
    $(this).html(cnum);
    cnum++;
  });
});

在jQuery中遍历普通类的html元素

1 个答案: