Jquery - 删除行..但顺序必须遵循 1,2,3,4

Question

我在 JS 和 HTML 下面使用了在单击关闭图标时删除行。它工作正常。

但是，需要添加额外的 2 个逻辑。最多 9 行。

https://jsfiddle.net/jkenluv/4cj6qnye/3/

1. 如果删除了 item2 并且 item3 存在，则 item3 的“id”必须更改为 item2。
2. 如果在单击关闭时删除了 item2。如果用户再次单击“添加”.. 它与 item2。不是第 3 项。无论如何，必须遵循顺序... item1、item2、item3、item4、item5、item6、item7、item8、item9。

JS：

var i = 2;
$("#addMoreNames").click(function() {
var temp_id = "add-name"+i;

var firstNameInput = $('<div />', {'class': 'col-lg-6 col-md-6 col-sm-6 campaign-firstname form-validate', 'data-campaign-contact-id': i}).append('<div class="form-title">Given name</div>').append($("<input />", { type: "text", id:"campaign-firstname-"+i, class: "name-validator", name: "First Name", "data-firstname": "First name is missing" }));

var lastNameInput = $("<div />", {'class': 'col-lg-5 col-md-5 col-sm-5 campaign-lastname form-validate', 'data-campaign-contact-id': i}).append('<div class="form-title">Family name</div>').append($("<input />", { type: "text", id:"campaign-lastname-"+i, class: "name-validator", name: "Last Name", "data-lastname": "Last name is missing" }));

$("<div />", { "class":"row-names", id:"add-name"+i })
.append(firstNameInput[0])
.append(lastNameInput[0])
.append('<div class="col-lg-1 col-md-1 col-sm-1 remove-flight"><a href="javascript:void(0);" aria-label="Remove">X</a></div>')
.appendTo("#add-more--names");

$('.remove-flight a').on('click', function(e){
  e.preventDefault();
  $(this).parent().remove();
});

i++;
if (i < 10){
  $(this).show();
} else {
  $(this).hide();
}

谢谢

Answer 1

我已经更改了标记并编写了一些“小”代码:)

用于标记 （仅出于视觉原因删除了缺失的类！）

• 我添加了一个容器 (div.person) 以将输入包装在一个逻辑单元中。
• 已完全删除编号的 ID。
• 此外，我添加了 <div class="remove-flight"><a>X</a></div>，但添加了 style="display:none" 以减少 JavaScript 部分中的标记。

<div class="person">
  <div>
    <div>Given name</div>
    <input type="text" name="First Name" data-firstname="First name is missing" />
  </div>
  <div>
    <div>Family name</div>
    <input type="text" name="Last Name" data-lastname="Last name is missing" />
  </div>
  <div class="remove-flight" style="display:none">
    <a href="javascript:void(0);" aria-label="Remove">X</a>
  </div>
</div>

对于 JavaScript 部分

• 我引入了一个变量，它定义了允许多少“人”（不是真的必要，但我也在 alert() 中使用它，因此...）
• 现在由委托的click 事件处理程序处理人员的删除：$("#add-more--names").on("click", ".remove-flight", function(e) {...})
  随着这一变化，只有一个活动处理程序也能够处理动态添加的元素/人员
• 用于添加新人员的click 处理程序现在首先检查是否有空间容纳新人员。否则它将触发alert()
  如果我们被允许添加一个新人，我们通过克隆 DOM 中的第一个人来创建一个新人：var newPerson = $(".person:first").clone();
  我们根据需要修改这个新人（添加类row-names，清除输入，显示div.remove-flight）
  并将其添加到 DOM：$("#add-more--names").append(newPerson);

$(document).ready(function() {
  var MaxNumberOfPersons = 3;

  $("#add-more--names").on("click", ".remove-flight", function(e) {
    e.preventDefault();
    $(this).closest(".person").remove();
  });

  $("#addMoreNames").on("click", function(e) {
    e.preventDefault();

    if ($("div.person").length < MaxNumberOfPersons) {
      var newPerson = $(".person:first").clone();

      newPerson.addClass("row-names");
      newPerson.find("input").val("");
      newPerson.find(".remove-flight").show();

      $("#add-more--names").append(newPerson);
    } else {
      alert("Only " + MaxNumberOfPersons + " persons allowed");
    }
  });
});

工作示例：

$(document).ready(function() {
  var MaxNumberOfPersons = 3;

  $("#add-more--names").on("click", ".remove-flight", function(e) {
    e.preventDefault();
    $(this).closest(".person").remove();
  });

  $("#addMoreNames").on("click", function(e) {
    e.preventDefault();

    if ($("div.person").length < MaxNumberOfPersons) {
      var newPerson = $(".person:first").clone();

      newPerson.addClass("row-names");
      newPerson.find("input").val("");
      newPerson.find(".remove-flight").show();

      $("#add-more--names").append(newPerson);
    } else {
      alert("Only " + MaxNumberOfPersons + " persons allowed");
    }
  });
});

div.person {
  margin: 10px;
  padding: 10px;
  border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="person">
    <div class="col-lg-6 col-md-6 col-sm-6 campaign-firstname form-validate">
      <div class="form-title">Given name</div>
      <input class="name-validator" type="text" name="First Name" data-firstname="First name is missing" />
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 campaign-lastname form-validate">
      <div class="form-title">Family name</div>
      <input class="name-validator" type="text" name="Last Name" data-lastname="Last name is missing" />
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1 remove-flight" style="display:none"><a href="javascript:void(0);" aria-label="Remove">X</a></div>
  </div>
</div>
<div class="row" id="add-more--names"></div>
<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12"><a class="btn" id="addMoreNames" href="javascript:void(0);" aria-label="Add name"><i class="fa fa-plus-circle" aria-hidden="true"> </i>Add Name</a></div>
</div>