For the following html:
<div class="section grouping">
<div class="sectionControl">
<div class="parent row errorOn">
<div class="validGroupControl">
<div class="row2 itemWrap clearfix">
<label>Login1 (adress e-mail)<span class="iconReq"> </span>:</label>
<input type="text" class="text">
</div>
<div class="itemWrap clearfix">
<label>Input field1<span class="iconReq"> </span>:</label>
<input type="password" class="text">
</div>
<a href="#" class="iconClose" onclick="$(this).closest('div.parent').remove();" title="remove">remove</a>
</div>
</div>
</div>
<div class="row addControl">
<a href="#" class="button" onclick="$('div.sectionControl').append($('div.sectionControl div.parent:last').html());">Add</a>
</div>
</div>
I want it to do the following:
clicking "add" button would take <div class="parent..."> and append it to <div class="sectionControl">
Pretty much i want it so that when i click Add button new <div class="parent" will be added underneath previous <div class="parent..."> and right above:
</div>
<div class="row addControl">
when i try it with the parent() like so:
alert($('div.sectionControl div.parent:last').parent().html())
i get duplicates. so instead of adding just one i get original + what i just added. I'm not sure how to handle this.
thank you
For the following html:
<div class="section grouping">
<div class="sectionControl">
<div class="parent row errorOn">
<div class="validGroupControl">
<div class="row2 itemWrap clearfix">
<label>Login1 (adress e-mail)<span class="iconReq"> </span>:</label>
<input type="text" class="text">
</div>
<div class="itemWrap clearfix">
<label>Input field1<span class="iconReq"> </span>:</label>
<input type="password" class="text">
</div>
<a href="#" class="iconClose" onclick="$(this).closest('div.parent').remove();" title="remove">remove</a>
</div>
</div>
</div>
<div class="row addControl">
<a href="#" class="button" onclick="$('div.sectionControl').append($('div.sectionControl div.parent:last').html());">Add</a>
</div>
</div>
I want it to do the following:
clicking "add" button would take <div class="parent..."> and append it to <div class="sectionControl">
Pretty much i want it so that when i click Add button new <div class="parent" will be added underneath previous <div class="parent..."> and right above:
</div>
<div class="row addControl">
when i try it with the parent() like so:
alert($('div.sectionControl div.parent:last').parent().html())
i get duplicates. so instead of adding just one i get original + what i just added. I'm not sure how to handle this.
thank you
Share Improve this question edited Feb 2, 2011 at 13:21 David Tang 93.7k32 gold badges168 silver badges149 bronze badges asked Feb 2, 2011 at 13:13 ShaneKmShaneKm 21.4k46 gold badges176 silver badges307 bronze badges1 Answer
Reset to default 5Firstly, take that inline onclick code out and attach using jQuery:
$('div.addControl a.button').click(function () {
var parent = $(this).closest('.section.grouping').find('.parent:last');
parent.after(parent.clone());
});
Note the '.parent:last', which will select only one of the divs.