Question

我在JS＆amp; amp;单击关闭图标时删除行的HTML。它工作正常。

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

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

如果删除了item2并且item3存在，则item3'id'必须更改为item2。
如果在点击关闭时删除了item2。如果用户再次点击“添加”..它与item2有关。不是item3。什么情况下，序列必须遵循... 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>

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

1 个答案: