可以添加帶附加的div嗎？通過這種方式？

Question

我有這樣的例子：

link

代碼HTML：

<button class="add">add</button> 
<button class="remove">remove</button> 

<div class="row" id="container-rec"> 
      <div class="col-md-12"> 
        <label for="clg_email">Email</label> 
        <input type="text" name="clg['email'][]" id="clg_email"> 
      </div> 
      <div class="col-md-12"> 
        <label for="clg_email">Email</label> 
        <input type="text" name="clg['email'][]" id="clg_email"> 
      </div> 
      <div class="col-md-12"> 
        <label for="clg_email">Email</label> 
        <input type="text" name="clg['email'][]" id="clg_email"> 
      </div> 
      <div class="col-md-12"> 
        <label for="clg_email">Email</label> 
        <input type="text" name="clg['email'][]" id="clg_email"> 
      </div> 
      <div class="col-md-12"> 
         <label for="clg_email">Email</label> 
         <input type="text" name="clg['email'][]" id="clg_email"> 
      </div> 
</div> 

CODE JS：

$('#add_new_rec').click(function (e) { 
    // custom handling here 
     e.preventDefault(); 
     $('.add').append('//my row'); 
}); 


$('.remove').click(function (e) { 
    $(".remove").remove("//remove my last row") 
}); 

CODE CSS：

.row{ 
    display:none 
} 

如何以我想要的方式添加新行？ 基本上我想一個好的解決方案來解決這個問題..

我不想

$('#mydiv').append('//some code HTML'); 

你可以幫我解決這個問題呢？ 基本上我想在每個按鍵點擊「添加」後添加一行並刪除至少點擊「刪除」

在此先感謝！

Answer 1

這裏是代碼，將

• 通過克隆一個隱藏的div
• 變化相關的ID
• 刪除最後一個時，點擊刪除

$(function() { 
 
    $("#add").on("click",function() { 
 
    var $container = $("#container-rec"); 
 
    var idx = $container.children().length; // how many children 
 
    var $div = $("#orgDiv").clone(); // copy 
 
    $div.prop("id","div"+idx); 
 
    $div.find("label").each(function() { 
 
     $(this).prop("for",$(this).next().prop("id")+idx); // change ID 
 
    }) 
 
    $div.find("input").each(function() { 
 
     $(this).prop("id",$(this).prop("id")+idx); // change ID 
 
    }) 
 
    $container.append($div); 
 
    }); 
 
    $("#remove").on("click",function() { 
 
    var $divs = $("#container-rec").find(".col-md-12"); 
 
    $divs.last().remove(); 
 
    }); 
 
});

#orgDiv { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button type="button" id="add">add</button> 
 
<button type="button" id="remove">remove</button> 
 

 
    <div id="orgDiv" class="col-md-12"> 
 
    <label for="clg_name">Name</label> 
 
    <input type="text" name="clg['name'][]" id="clg_name"><br/> 
 
    <label for="clg_email">Email</label> 
 
    <input type="text" name="clg['email'][]" id="clg_email"> 
 
    </div> 
 

 

 
<div class="row" id="container-rec"> 
 
</div>

添加與投入的div