jquery - 点击按钮，删除最后一行可用

Question

这里，如果点击X，则想删除整行。这工作正常。

如果用户点击'add-item2'X ..它删除'add-item2'。因此，'add-item1'&'add-item3'将可供用户填写。

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

所以， '附加物品1' & '附加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(); 
}); 

Answer 1

Simply remo已经在集中的最后一行 - 使用X作为一般的删除功能，而不是试图针对特定行

UPDATE

检查下面的代码，你将处理器每个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>