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()因此它將在克隆的html中將子元素的正確增量值作為id傳遞

下面的代碼只是使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> 

Answer 2

您可以向actions類添加樣式，以防止其顯示在所有克隆的元素上

的CSS

.actions {
  display: none;
}

.clonedInput:first-child .actions {
  display: block;
}

同樣對於刪除功能，您可以使用.closest()代替.parent().parent()

$(this).closest(".rounded").remove();

Answer 3

有很多東西可以優化和替換，但是我已經編輯了您的代碼。 我相信這是最簡單的學習方法。 這些編輯在注釋中標記為“ STACKOVERFLOW EDIT”。

$(document).ready(function() {
  $("button.clone").on("click", clone);
  $("button.remove").on("click", remove);
  $("button.submit").on("click", submit_form); // STACKOVERFLOW EDIT: execute the submit function
});

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

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

function remove() {
    if($(".clonedInput").length > 1) { // STACKOVERFLOW EDIT: Make sure that you will not remove the first div (the one thet you clone)
    $(".rounded").find(".clonedInput:last").remove();
    } // STACKOVERFLOW EDIT
}

// STACKOVERFLOW EDIT: define the submit function to be able to sent the data
function submit_form() {
    var ajax_data = $('#submit_form').serialize(); // The data of your form
    $.ajax({
    type: "POST",
    url: 'path_to_your_script.php', // This URL should be accessable by web browser. It will proccess the form data and save it to the database.
    data: ajax_data,
    success: function(ajax_result){ // The result of your ajax request
        alert(ajax_result); // Process the result the way you whant to
    },
    });
}

HTML：

<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">
  <form action="" method="post" id="submit_form"> <!-- STACKOVERFLOW EDIT: generate a form to allow you to get the data in easy way -->
    <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"> <!-- STACKOVERFLOW EDIT: Add [] so that you may receive the values as arrays -->
            <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"> <!-- STACKOVERFLOW EDIT: Add [] so that you may receive the values as arrays -->
        </fieldset>
        <!-- End class="col-sm-6" -->
        </div>
        <!-- End class="col-sm-6" -->
    </div>
  </form> <!-- STACKOVERFLOW EDIT -->  
  <div class="actions pull-right">
    <button class="btn btn-danger clone">Add More</button>
    <button class="btn btn-danger remove">Remove</button>
    <button class="btn btn-danger submit">Submit</button>
  </div>

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