在容器

Question

我正在编写一个动态创建行的代码 问题是，当我点击按钮时，它会在已存在的行之后添加行。但现在div与id动态包含两行，所以如果我点击现在按钮它将添加两行。如果我使用（'#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'));
   });
});