Question

我有这个样本：

代码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吗？通过这种方式？

1 个答案: