2016-12-09 13 views
0

「追加」ボタンをクリックして行を複製するコードを作成し、「削除ボタン」をクリックして行を削除します。私の問題は、削除ボタンを最初の行に表示するのではなく、複製行だけに表示することです。これに関する助けがあれば大歓迎です!あなたのCSSで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; 
}); 

答えて

0

、ちょうど追加:

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

パーフェクト、感謝を! – EBM84

関連する問題