如何维护jquery生成的受益者序列？

Question

我正在开发一个生成遗嘱的web应用程序。为此，我需要开发一个系统，允许用户添加多个受益者。我已经写了一些代码，用于创建新的受益者，但问题是，当用户删除一个受益者时，序列号不会相应地工作。

例如，用户添加了5个受益者，他删除了序列号不变的第三个受益者。即受益者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>

​

Answer 1

你可以从这里开始

更简单的代码，并删除了弃用的委托

​

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>

​

Answer 2

尝试在每次添加或删除时重新编号您的条目：

function renumber() {
    var i = 1;
    $('.bNmbr').each(function(){
        this.innerHTML = i;
        ++i;
    });
}

可以通过mplungjan与代码结合使用。

Answer 3

这对你来说是一个完整的代码。我试着让它更容易编辑，并删除了重复的ID创建：

​

var bene = 1;

function correctNumbers() {
    $('.bNmbr').each(function(i) {
        $(this).text(i + 1);
    });
};

$('body').on('click', '.addBeneficiary', function(e) {
    e.preventDefault();
    bene++;
    addBeneficiary(bene);
});

$('body').on('click', '.delBeneficiary', function(e) {
    e.preventDefault();
    $(this).closest('.bene').remove();
    correctNumbers();
});

function addBeneficiary(bene) {
    $("#beneficiaries").append('\
        <div class="bene" id="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' + bene + '" 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' + bene + '" name="ebname[]" placeholder="Name">\
                </div>\
                <label for="enric' + bene + '" 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' + bene + '" name="ebnric[]" placeholder="NRIC / Passport No">\
                </div>\
                <label for="relationship' + bene + '" 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' + bene + '" 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 addBeneficiary" id="add' + bene + '">Add</button>\
                    <button class="btn btn-sm delBeneficiary ml-2" id="delete' + bene + '">Delete</button>\
                </div>\
            </div>\
        </div>\
    ');
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<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-12 col-md-11 mt-2  text-right'>
        <button class='btn btn-sm addBeneficiary '>Add</button>
    </div>
</div>
<div id='beneficiaries'>
</div>

​

也在JSFiddle上