0
我有点击“添加”按钮写入重复行的代码,并通过点击“删除按钮”删除行。我的问题是,我不希望删除按钮出现在第一行,但只在重复的行。任何帮助,这是非常感谢!添加和删除与Jquery的链接
http://codepen.io/EBM84/pen/KNBVLr
<div class="duplicate-sections">
<div class="form-section">
<input type="text" placeholder="Start Date" class="short-text-box">
<input type="text" placeholder="End Date" class="short-text-box">
<input type="text" placeholder="Address">
<input type="text" placeholder="City">
<input type="text" placeholder="Country">
<a href="#" class="remove">- Remove</a>
</div> <!-- End .form-section -->
</div> <!-- End .duplicate-sections -->
<a class="btn btn-duplicate addsection" href="#" role="button" data-section='0'>+ Add Another</a>
var forms = [];
$('.duplicate-sections .form-section').each(function(){
forms.push($(this).clone());
})
//define counter
var sectionsCount = 1;
//add new section
$('body').on('click', '.addsection', function() {
var template = forms[$(this).data('section')];
//increment
sectionsCount++;
//loop through each input
var section = template.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.id + sectionsCount;
//update for label
$(this).prev().attr('for', newId);
//update id
this.id = newId;
}).end()
//inject new section
.appendTo($(this).prev('.duplicate-sections'));
return false;
});
//remove section
$('.duplicate-sections').on('click', '.remove', function() {
//fade out section
$(this).closest('.form-section').fadeOut(300, function(){
$(this).closest('.form-section').empty();
});
return false;
});
完美,谢谢! – EBM84