单击按钮后重复/添加 div

Question

我连续有 3 个字段，我没有使用表格。所以我想知道点击+按钮时是否可以添加使用div标签的新“行”？

代码如下。

<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
            <div class="input-field col s4">
                <input type="text" class="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" class="qty" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" class="order-remarks" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons">add</i>
            </div>
        </div>
    </div>

---

最初只有 1 行。

---

我想要的是，点击+按钮后，它会像这样添加一个新行。

Answer 1

您可以使用 jQuery 添加和删除带有id increment 的表单字段。请看下面的sn-p：

// Cloning Form
  var id_count = 1;
  $('.add').on('click', function() {
    var source = $('.form-holder:first'), clone = source.clone();
    clone.find(':input').attr('id', function(i, val) {
      return val + id_count;
    });
    clone.appendTo('.form-holder-append');
    id_count++;
  });

// Removing Form Field
$('body').on('click', '.remove', function() {
    var closest = $(this).closest('.form-holder').remove();
  });

.form-holder {
  display: flex;
  margin-bottom: 10px;
}

.input-field input {
  width: 100px;
}

.add, .remove {
  display: block;
  border: 1px solid #ccc;
  padding: 2px 10px;
  margin-left: 10px;
  cursor: pointer;
}

.add:hover {
  background: #eee;
}

.remove {
  display: none;
}

.form-holder-append .remove {
  display: block;
}

body {
  margin: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
          <div class="form-holder col-xs-12">
            <div class="input-field col s4">
                <input type="text" id="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" id="item-code" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" id="item-code" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons remove">- remove</i>
            </div>
        </div>

          <div class="form-holder-append"></div>
          <div class="row">
                    <div class="col-xs-4">
                          <i class="material-icons add">+ add</i>
            </div></div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

希望这会有所帮助！

Answer 2

使用clone() 方法。它将创建您要附加的行的重复对象。使用此对象向您的父 div 添加新行。

find("input[type='text']").val("") 将清除在原始元素中输入的任何值。

另外，正如其他人所指出的，您的 HTML 已将 ids 附加到元素上，这些元素在复制时会创建具有相同 ID 的多个元素。您应该避免在这种情况下使用ids，并使用类作为选择器。

$('#order-details-booking').on('click','.material-icons',function(){
   $(this).closest('.row').clone().appendTo('#order-details-booking').find("input[type='text']").val("");//use closest to avoid multiple selection and clear input text elements
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
            <div class="input-field col s4">
                <input type="text" id="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" id="item-code" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" id="item-code" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons">add</i>
            </div>
        </div>
    </div>