javascript - 在容器中追加行

Question

我正在编写动态创建行的代码。
问题是当我单击按钮时，它会在已存在的行之后添加行。但现在 id 为动态的 div 包含两行，因此如果我单击“立即”按钮，它将添加两行。如果我使用 ('#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'));
   });
});