2016-12-09 6 views
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; 
}); 

Antwort

0

In Ihrem CSS, fügen Sie einfach:

.form-section:first-child .remove { 
    display:none; 
} 
+0

Perfect, danke! – EBM84

Verwandte Themen