I'll-Be-Back I'll-Be-Back - 1 year ago 58
jQuery Question

Remove label from the clone?

When the slot has been cloned, the

label
are hidden. Only first slot at the top have a
label
(not hidden).

Currently it is hiding all the labels, how to solve this?

$('.slot-container').on("click", ".btn-add-slot", function(event) {
var slot = $(this).closest('.slot');
copySlot = slot;

$('label', copySlot).hide(); // hide Clone Label

$(slot).clone().appendTo(".slot-container");

//hide button from this slot
$(this).hide();
});


HTML:

<div class="slot-container">
<div class="slot">
<label>Time</label>
<input type='text' class='address_field' />
<button class="btn-add-slot">
Add Slot +
</button>
</div>
</div>


Fiddle

Answer Source

To solve this you need to call hide() on the label element within the cloned element only. Also note that you can tidy the logic slightly. Try this:

$('.slot-container').on("click", ".btn-add-slot", function(event) {
    var $clone = $(this).closest('.slot').clone().appendTo(".slot-container");        
    $clone.find('label').hide();
    $(this).hide();
});

Updated fiddle