現在の複製されたdivの最後の追加ボタンのみを表示する方法は？

Question

私は、html要素を複製するコードを持っています。私は、「最も近い」コピーのためだけに新しいボタンを追加する必要があります（divをクローンします）。クローンされたdivのすべてではありません。

codepen for this

​​

Answer 1

に応じて動作しますが、これを見ています。 （私はあなたのDIVをコンテナに入れました）。あなたはinput要素と実際の行の後に別のDIVを持っているので、私はnth-last-child(2)を使用

#duplicater #removebutton { 
    display: none; 
} 

div.container button.add { 
    display: none; 
} 
#rows-container div:nth-last-child(2) button.add { 
    display: inline-block; 
} 

注意してください。

これは、あなたの更新codepenです：
http://codepen.io/anon/pen/bwQzvN

Answer 2

それは私がここにCSSソリューションがはるかに容易にすることができると思うウル必要

$(document).ready(function() { 
 
    var id = 0; 
 
    var elem = '<div class="holder"><label>Number:</label><input type="number" class="quantity"/><button class="remove">Delete</button><button class="add">add</button></div>'; 
 
    $(document).on('click', '.add', function(e) { 
 
    $(".add").remove(); 
 
    id++; 
 
    $(elem).insertBefore('.new_item_details'); 
 
    }); 
 
    $(document).on('click', '.remove', function(e) { 
 
    if ($(".holder").length > 1) 
 
     $(this).closest('div').remove(); 
 
    if ($(".add").length == 0) 
 
     $(".holder:last").append('<button class="add">add</button></div>'); 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<div id="duplicater"> 
 
    <label>Number:</label> 
 
    <input type="number" class="quantity" /> 
 
    <button class='remove'>Delete</button> 
 
    <button class="add">add</button> 
 
</div> 
 
<div id="new_item_details" class="new_item_details"> 
 
</div>