此处,如果单击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();
});
答案 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>