JQuery добавить в родительский DIV

Question

Для следующего 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">&nbsp;</span>:</label> 
        <input type="text" class="text"> 
       </div> 
       <div class="itemWrap clearfix"> 
        <label>Input field1<span class="iconReq">&nbsp;</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> 

Я хочу, чтобы это сделать следующее: нажав кнопку «Добавить» будет принимать <div class="parent..."> и добавить его в <div class="sectionControl">

Довольно много я хочу так что, когда я нажмите кнопку Добавить новый <div class="parent" будет добавлен под предыдущую <div class="parent..."> и прямо над:

     </div> 
        <div class="row addControl"> 

при попытке его родителя() как так:

alert($('div.sectionControl div.parent:last').parent().html()) 

я получить дубликаты. поэтому вместо добавления только одного я получаю оригинал + то, что я только что добавил. Я не уверен, как справиться с этим.

спасибо

Answer 1

Во-первых, считать, что встроенный onclick код, и прикрепить с помощью JQuery:

$('div.addControl a.button').click(function() { 
    var parent = $(this).closest('.section.grouping').find('.parent:last'); 
    parent.after(parent.clone()); 
}); 

Обратите внимание на '.parent:last', который будет выбран только один из дивы.