在容器中附加行

Question

我正在编写一个动态创建行的代码。

问题是，当我单击按钮时，它会在已经出现的行之后添加行。但是现在id dynamic的div包含两行，所以如果我单击Now按钮，它将添加两行。如果我使用('#dynamic').html()，那么它会抓取列，但是如果这样做，就会违反缩进，因为它不会添加带有类行的div。有谁能告诉我问题的解决办法吗？

​

$(function() {

  $("#button1").click(function() {

    $("#main-row").after($('#dynamic').html());
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="above">
  <div class="container">
    <div class="row">
      <div class="col-sm-1">No.</div>
      <div class="col-sm-2">Name of Item</div>
      <div class="col-sm-3">Quanity</div>
      <div class="col-sm-3">Price</div>
      <div class="col-sm-1"><span class="btn"></span></div>
    </div>
  </div>
  <div class="container" id="dynamic">
    <div class="row padding-3 " id="main-row">
      <div class="col-sm-1  ">1</div>
      <div class="col-sm-2  ">
        <select class="container-fluid">
                    <option value="1">Computer</option>
                    <option value="2">Mobile</option>
                    <option value="3">LCD</option>
                    <option value="4">Keyboard</option>
                    <option value="5">Mouse</option>
                </select>
      </div>
      <div class="col-sm-3 "><input class="container-fluid" type="number" name="name" value="" /></div>
      <div class="col-sm-3 "><input type="text" name="text" value="" /></div>
      <div class="col-sm-1 "><a href="#" class="btn-block background-color">-</a></div>
    </div>

  </div>
  <button class="btn btn-primary" id="button1">Add Row</button>
</section>

​

Answer 1

尝试：

$(function() {
   $("#button1").click(function() {
      $('#dynamic').append($("#main-row").clone().removeAttr('id'));
   });
});