javascript - 如何维护通过jquery生成的受益人的顺序？

我正在开发Will生成的Web应用程序。为此，我需要开发一个系统，允许用户添加多个受益人。
我编写了一些代码，该代码可用于在新受益人上创建，但是问题是，当用户删除受益人时，序列号将无法正常工作。

例如，用户添加了5个受益人，而他删除了第3个受益人，其序列号保持不变。即受益人1，受益人2，受益人4，受益人5。我想对这个问题进行排序，使他们按顺序排列。

对于我的代码，请检查此

https://jsfiddle.net/shahzadwaris/purvo4bn/5/

$(document).delegate(".delBeneficiary", "click", function(e) {
  e.preventDefault();
  var div = $(this).attr("id");
  var nmbr = div.replace(/\D/g, "");
  $("." + div).remove();
  bene--;

  //alert(nmbr);
});
var bene = 2;
$(".addBeneficiary").click(function(e) {
  e.preventDefault();
  addBeneficiary(bene);
  bene++;
});
$(document).delegate(".addBeneficiaryD", "click", function(e) {
  e.preventDefault();
  addBeneficiary(bene);
  bene++;
});

function addBeneficiary(bene) {
  $("#beneficiaries").append(
    "<div class = 'bene" +
    bene +
    "'><h6 class = 'mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>" +
    bene +
    "</span></b></h6>" +
    "<div class='form-group row'>" +
    "<label for='ename' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>" +
    "<div class='col-sm-7'>" +
    " <input type='text' class='form-control p-1 mt-1' id='ename' name = 'ebname[]' placeholder='Name'>" +
    "</div>" +
    "<label for='enric' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>" +
    "<div class='col-sm-7'>" +
    "<input type='text' class='form-control p-1 mt-1' id='enric' name = 'ebnric[]' placeholder='NRIC / Passport No'>" +
    "</div> " +
    "<label for='relationship' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>Relationship</span></label>" +
    "<div class='col-sm-7'>" +
    "<input type='text' class='form-control p-1 mt-1' id='Rrelationship' name = 'ebrelationship[]' placeholder='Relationship'>" +
    "</div>" +
    "<div class = 'col-xs-12 col-sm-12 col-md-11 mt-2  text-right'>" +
    "<button class = 'btn btn-sm addBeneficiaryD ' id = 'bene" +
    bene +
    "' >Add</button>" +
    "<button class = 'btn btn-sm delBeneficiary ml-2' id = 'bene" +
    bene +
    "'>Delete</button>" +
    "</div>" +
    "</div></div>"
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h6 class='mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>1</span></b></h6>
<div class="form-group row">

  <label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>
  <div class="col-sm-7">
    <input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
  </div>
  <label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>
  <div class="col-sm-7">
    <input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
  </div>
  <label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Relationship</span></label>
  <div class="col-sm-7">
    <input type="text" class="form-control p-1 mt-1" id="Rrelationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
  </div>
  <div class='col-xs-12 col-sm-10 col-md-8 mt-2  text-right'>
    <button class='btn btn-sm addBeneficiary '>Add</button>
  </div>
</div>
<div id='beneficiaries'>
</div>

最佳答案

你可以从这里开始

更简单的代码并删除了不赞成使用的委托

function renum() {
  $(".beneficiary").each(function() {
    $(this).find(".bNmbr").text($(this).index()+1)
  })
}
$(".delBeneficiary").eq(0).hide()
$(document).on("click", ".delBeneficiary ", function(e) {
  e.preventDefault();
  $(this).closest(".beneficiary").remove();
  renum();
});
$(document).on("click", ".addBeneficiary", function(e) {
  e.preventDefault();
  const beneCount = $(".beneficiary").length;
  let $bene = $(this).closest(".beneficiary").clone();
  $bene.find("input").each(function() { $(this).val("") }); // empty inputs
  $bene.find("[id]").each(function() {
    this.id += beneCount;
  })
  $bene.find(".bNmbr").text(beneCount + 1)
  $bene.appendTo("#beneficiaries")
  $(".delBeneficiary:gt(0)").show();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='beneficiaries'>
  <div class="beneficiary">
    <h6 class='mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>1</span></b></h6>
    <div class="form-group row">
      <label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>
      <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
      </div>
      <label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>
      <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
      </div>
      <label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Relationship</span></label>
      <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="Relationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
      </div>
      <div class='col-xs-12 col-sm-10 col-md-8 mt-2  text-right'>
        <button class='btn btn-sm addBeneficiary '>Add</button>
        <button class='btn btn-sm delBeneficiary ml-2'>Delete</button>
      </div>
    </div>
  </div>
</div>

关于javascript - 如何维护通过jquery生成的受益人的顺序？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57969779/