javascript - jQuery 递增克隆的元素而不是克隆的 div

Question

我有这个 HTML 脚本，其中包含一个下拉列表和一个文本框，我只需要克隆这两个而不是整个 div，然后将数据发送到 AJAX，每个带有文本框的下拉列表将形成一个应该作为单行添加到表中的数组，这就是我现在拥有的:

        <div class="col-sm-4 rounded" style="background-color: #D3D3D3">
          <div class="row clonedInput" id="clonedInput1">
          <div class="col-sm-6 ">
              <label for="diagnosis_data">Medication</label>
                <fieldset class="form-group">
                  <select class="form-control select" name="diagnosis_data" id="diagnosis_data">
                    <option value="choose">Select</option>
                  </select>
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <div class="col-sm-6">
              <label for="medication_quantity">Quantity</label>
                <fieldset class="form-group">
                  <input type="number" class="form-control" name="medication_quantity" id="medication_quantity">
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <!-- End class="col-sm-6" -->
          </div>
          <div class="actions pull-right">
            <button class="btn btn-danger clone">Add More</button> 
            <button class="btn btn-danger remove">Remove</button>
          </div>

        <!-- End class="col-sm-4" -->
        </div>

这里是 jQuery 脚本:

$(document).ready(function()
  {
    $("button.clone").on("click", clone);

    $("button.remove").on("click", remove);
  })
    var regex = /^(.+?)(\d+)$/i;
    var cloneIndex = $(".clonedInput").length;
    function clone(){

        $(this).closest(".rounded").clone()
            .insertAfter(".rounded:last")
            .attr("id", "rounded" +  (cloneIndex+1))
            .find("*")
            .each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = id.split('-')[0] +'-'+(cloneIndex);
                }
            })
            .on('click', 'button.clone', clone)
            .on('click', 'button.remove', remove);
        cloneIndex++;
    }
    function remove(){
        $(this).parent().parent(".rounded").remove();
    } 

问题是整个 div 都被克隆了，只是 div id 被改变了:

这是递增的每个 div 的 id:

我只需要克隆 2 个元素而不是整个 div 和按钮

最后我需要使用 Ajax 和 PHP 将它们添加到数据库

Answer 1

您可以在此处查看代码。

在这段代码中，我对 clone() 进行了更改

• 这里是变化

  1. 您首先找到现有的子元素。
  2. 克隆该元素并将其追加到最后一个元素之后
  3. var cloneIndex = $(".clonedInput").length; 这应该在 clone() 中所以它将传递子元素的适当增量值作为 id 在你克隆的 html 中

下面的代码只是克隆了 clonedInput 而不是整个 div

编辑

我也编辑删除功能。

它只会删除克隆的最后一个元素。

希望对您有所帮助。 :)

$(document).ready(function()
{
  $("button.clone").on("click", clone);
  $("button.remove").on("click", remove);
});

var regex = /^(.+?)(\d+)$/i;

function clone() {
  var cloneIndex = $(".clonedInput").length;
  $(".rounded").find("#clonedInput1").clone().insertAfter(".clonedInput:last").attr("id", "clonedInput" +  (cloneIndex+1));
}

function remove() {
  $(".rounded").find(".clonedInput:last").remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 rounded" style="background-color: #D3D3D3">
          <div class="row clonedInput" id="clonedInput1">
          <div class="col-sm-6 ">
              <label for="diagnosis_data">Medication</label>
                <fieldset class="form-group">
                  <select class="form-control select" name="diagnosis_data" id="diagnosis_data">
                    <option value="choose">Select</option>
                  </select>
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <div class="col-sm-6">
              <label for="medication_quantity">Quantity</label>
                <fieldset class="form-group">
                  <input type="number" class="form-control" name="medication_quantity" id="medication_quantity">
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <!-- End class="col-sm-6" -->
          </div>
          <div class="actions pull-right">
            <button class="btn btn-danger clone">Add More</button> 
            <button class="btn btn-danger remove">Remove</button>
          </div>

        <!-- End class="col-sm-4" -->
        </div>