Wie zeigt man nur die zuletzt hinzugefügte Schaltfläche in den aktuellen geklonten divs an?

Question

Ich habe einen Code, der das HTML-Element klonen wird, ich muss "hinzufügen" neue Schaltfläche (die das Div klonen) nur für die unterste Kopie zeigen. nicht für alle geklonten divs.

codepen for this

 <div id="duplicater"> 
     <label>Number:</label> 
    <input type="number" class="quantity" id="quantity"/> 
    <button id="removebutton" class='remove'>Delete</button> 
     <button id="add">add</button> 
    </div> 
    <div id="new_item_details" class ="new_item_details"> 
    </div> 

    <script> 
    jQuery(document).ready(function() { 
     var id = 0; 
      jQuery(document).on('click', '#add', function(e) { 
      var button = jQuery('#duplicater').clone(); 
      id++; 
      button.removeAttr('id'); 
      button.insertBefore('.new_item_details'); 
      button.attr('id', 'new_' + id).attr('data-id', id); 
      button.find('.remove').attr('data-id', id); 
      e.preventDefault(); 

     }); 
     jQuery(document).on('click', '.remove', function(e) { 
    var thisId = jQuery(this).data('id'); 
     jQuery('div[data-id="' + thisId + '"]').remove(); 
    e.preventDefault(); 
    }); 


     }); 
    </script> 

Answer 1

Ich denke, hier eine CSS-Lösung viel einfacher sein kann. (Ich habe deine DIVs in einen Behälter gewickelt).

#duplicater #removebutton { 
    display: none; 
} 

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

Beachten Sie, dass ich die nth-last-child(2) verwendet, weil Sie einen anderen DIV nach den tatsächlichen Zeilen mit den input Elementen haben.

Dies ist die aktualisierte codepen:
http://codepen.io/anon/pen/bwQzvN

Answer 2

haben einen Blick auf diese, es funktioniert nach ur Notwendigkeit

$(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>