Jquery - 单击按钮,删除最后一个可用行

时间:2017-04-20 16:37:03

标签: jquery

此处,如果单击X,则要删除完整的行。这很好。

如果用户点击了' add-item2' X ..它删除了'add-item2'。所以,' add-item1' &安培; '附加项目3'将供用户填写。

但是,我们需要的功能。如果用户点击了' add-item2' X ..它必须检查并删除最后可用的'行。例如:' add-item3'必须删除此示例。

所以,' add-item1' &安培; '附加ITEM2'将供用户填写。

HTML:

<div class="row" id="add-more--names">
    <div class="row-names" id="add-name1">
        <div class="firstname form-validate">
            <input type="text" id="firstname-1" class="name-validator" name="First Name" >
        </div><div class="lastname form-validate>
            <input type="text" id="lastname-1" class="name-validator" name="Last Name">
        </div>
        <div class="remove">
            <a href="javascript:void(0);">X</a>
        </div>
    </div>
    <div class="row-names" id="add-name2">
        <div class="firstname form-validate">
            <input type="text" id="firstname-2" class="name-validator" name="First Name" >
        </div><div class="lastname form-validate>
            <input type="text" id="lastname-2" class="name-validator" name="Last Name">
        </div>
        <div class="remove">
            <a href="javascript:void(0);">X</a>
        </div>
    </div>
    <div class="row-names" id="add-name3">
        <div class="firstname form-validate">
            <input type="text" id="firstname-3" class="name-validator" name="First Name" >
        </div><div class="lastname form-validate>
            <input type="text" id="lastname-3" class="name-validator" name="Last Name">
        </div>
        <div class="remove">
            <a href="javascript:void(0);">X</a>
        </div>
    </div>
</div>

JS:

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

1 个答案:

答案 0 :(得分:1)

只需删除集合中的最后一行 - 使用X作为常规删除功能,而不是尝试定位特定行

<强>更新

检查下面的代码,每次添加行时都要为每个X添加处理程序,因此添加多个处理程序 - 因此,在创建行时为每个X添加动态类,然后添加那个

的处理程序

$(document).ready(function() {
  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" class="remove-name' + i + '">X</a></div>')
      .appendTo("#add-more--names");

    $('.remove-flight .remove-name' + i).on('click', e => {
      e.preventDefault();
      $('#add-more--names').children().last().remove();
    });

    i++;
    if (i < 10) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <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" id="campaign-firstname-1" 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" id="campaign-lastname-1" type="text" name="Last Name" data-lastname="Last name is missing">
  </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>