0
Ich habe Code geschrieben, um Zeilen mit dem Klicken auf eine Schaltfläche "Hinzufügen" zu duplizieren, und entfernen Sie Zeilen mit dem Klick auf eine Schaltfläche "Entfernen". Mein Problem ist, ich möchte nicht, dass die Schaltfläche zum Entfernen in der ersten Zeile erscheint, sondern nur in den doppelten Zeilen. Jede Hilfe mit diesem wird sehr geschätzt!Hinzufügen und Entfernen von Links mit 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;
});
Perfect, danke! – EBM84