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>
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();
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments