I'll-Be-Back I'll-Be-Back - 17 days ago 5
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

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

Comments