Menu
I'm trying to clone a bootstrap row but every time I get a multiple-line (1-2-4-8-etc)
$("#clone").click(function() {
$(".cloned-row:first").clone().insertAfter(".cloned-row");
});
HTML
<div class="cloned-row">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="foo">Foo</label>
<input type="text" class="form-control" name="foo[]" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="bar">bar</label>
<input type="text" class="form-control" name="bar[]" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<input type="button" class="form-control btn-info" value="clone" id="clone">
</div>
<div class="col-md-2">
<input type="button" class="form-control btn-danger" value="remove" id="remove">
</div>
</div>
How could I do to clone only a div cloned-row at a time? Thank You
205
To clone an element using jQuery, use the jQuery. clone() method. The clone() method clones matched DOM Elements and select the clones. This is useful for moving copies of the elements to another location in the DOM.
jQuery clone() Method The clone() method makes a copy of selected elements, including child nodes, text and attributes.
Cloning in javascript is nothing but copying an object properties to another object so as to avoid creation of an object that already exists. There are a few ways to clone a javascript object. 1) Iterating through each property and copy them to a new object.
You are simply telling it to insert after every cloned row with insertAfter(".cloned-row"). That is causing additional cloning you did not expect.
Just insert after the last one using :last
e.g.
insertAfter(".cloned-row:last")
JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8zdutfy/
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
