Remove label from the clone?

I'll-Be-Back

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

Rory McCrossan

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related