CODEWITHSUNDEEP
javascriptjqueryhtml
Chud37
Chud37

Reputation: 5027

Cloning a DIV with jQuery

I have the following Javascript:

$("div.duplicate-fields:last-child").clone().find('input').each(function() {
    this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+1) + ']'});
    this.value = "";
    this.checked = false;
}).removeClass("active").end().appendTo("#duplicate-section");

Inside a .click() function. This works fine. However I have the following HTML in the cloned area:

<div class="btn-group" data-toggle="buttons"><label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][1]" value="">Session 1</label>
<label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][2]" value="">Session 2</label>
<label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][3]" value="">Session 3</label>
<label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][4]" value="">Session 4</label>
<label class="btn btn-default button-array active"><input type="checkbox" name="select-sessions[3][5]" checked="" value="">Session 5</label>
</div>

Now, in the above jQuery I have this.checked=false; which makes any cloned checkbox unchecked. But unfortunately, The label.button-array still has the class of active, which means it still looks like it is checked.

So I modified my jQuery function be like this:

$("div.duplicate-fields:last-child").clone().find('input').each(function() {
    this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+1) + ']'});
    this.value = "";
    this.checked = false;
}).find("label.button-array.active").each(function() {
    $(this).removeClass("active");
}).end().appendTo("#duplicate-section");

Notice the new find() function added on to the first. However, It seems to completely remove all the HTML from the clone, and I end up with a few input boxes and that's about it. I cannot figure out why.

In this image you can see the first cloned area, and then after pressing the button (with the new find() function added in, as shown above):

I just end up with raw input fields

Help me Stack Overflow, you're my only hope.

Upvotes: 5

Views: 486

Answers (3)

potatopeelings
potatopeelings

Reputation: 41075

You are missing a .end().

So you were operating on the first selection (input), which means instead of appending the cloned div.duplicate-fields to #duplicate-section, you were instead appending your collection of inputs to #duplicate-section (which explains the five checkboxes)

Try replacing your second block with this 

$("div.duplicate-fields:last-child").clone().find('input').each(function () {
    this.name = this.name.replace(/\[(\d+)\]/, function (str, p1) { return '[' + (parseInt(p1, 10) + 1) + ']' });
    this.value = "";
    this.checked = false;
}).end().find("label.button-array.active").each(function () {
    $(this).removeClass("active");
}).end().appendTo("#duplicate-section");

Bootply - http://www.bootply.com/bPwHVfFzK8

Upvotes: 3

MarcoReni
MarcoReni

Reputation: 478

Since you are already looping each input element, you can try to use $.parent() to get the label, then edit its class.

Something like 

$("div.duplicate-fields:last-child").clone().find('input').each(function() {
    this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+1) + ']'});
    this.value = "";
    this.checked = false;
    $(this).parent().removeClass("active");
}).end().appendTo("#duplicate-section");

Upvotes: 1

Pete
Pete

Reputation: 58462

Try this:

$("div.duplicate-fields:last-child").clone().find('input').each(function() {
    this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+1) + ']'});
    this.value = "";
    this.checked = false;
    $(this).parent("label.button-array.active").removeClass("active");
}).removeClass("active").end().appendTo("#duplicate-section");

Upvotes: 1

Related Questions