Question

我有一个我想克隆的表格。表格看起来像这样。

<form method="post">
    <div id=duplicator>
        <div class="form-group col-md-6">
            <label>Client's Name</label>
            <input type="text" class="form-control" name="client_name" />
        </div>
        <div class="col-md-12">
            <div class="pull-left">
                <button type="button" class="btn btn-success add" onclick="duplicate()">ADD +</button>
                <button type="button" class="btn btn-danger remove">DEL -</button>
            </div>
        </div>
    </div>
    //Duplicator div close
    <div class="pull-right">
        <input type="submit" class="btn btn-success btn-xm submit" name="submit" value="Submit" />
    </div>
</form>

我使用以下代码复制了分部：

var i = 0;
var original = document.getElementById('duplicator');

function duplicate() {
    var clone = original.cloneNode(true);
    clone.id = "duplicat0r" + ++i;
    original.parentNode.appendChild(clone);
}

但是这些部门在提交按钮后克隆。我想在提交按钮之前插入克隆的div。

以及如何在单击“删除”按钮时删除克隆的分区。

Answer 1

使用clone()复制元素并使用before()在选择器之前插入元素。

$(".add").click(function(){
    var clone = $(".form-group:first").clone();
    clone.find("input").val("");
    $(".buttonBox").before(clone);
});

$(".remove").click(function(){
    $(".form-group:last").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=duplicator>
    <div class="form-group col-md-6">
        <label>Client's Name</label>
        <input type="text" class="form-control" name="client_name" />
    </div>
    <div class="col-md-12 buttonBox">
        <div class="pull-left">
            <button type="button" class="btn btn-success add">ADD +</button>
            <button type="button" class="btn btn-danger remove">DEL -</button>
        </div>
    </div>
</div>
<div class="pull-right">
    <input type="submit" />
</div>

Answer 2

试试这个：

$(document).ready(function() {
    var last12 = $('.col-md-12').last();
    $(document).on('click', '.add', function() {
        $('.col-md-6').last().clone().insertBefore(last12);  
    });
    $(document).on('click', '.remove', function() {
        if($('.col-md-6').length > 1) {
            $('.col-md-6').last().remove();
        }
    });
});

这是一个JSFiddle
https://jsfiddle.net/noz2s4nh/6/

Answer 3

此演示将：

最初有文本输入，添加按钮和提交按钮。
单击“添加”按钮以添加一组克隆的表单元素。
此克隆已附加到表单。
每个克隆都有一个删除按钮。
点击删除按钮删除克隆。
总会有至少一个表单组。

段

var i = 0;
var original = document.getElementById('set');
var form1 = document.getElementById('form1');
var btn1 = form1.querySelector('button');

function duplicate() {
  i++;
  var clone1 = original.cloneNode(true);

  clone1.id = "clone" + i;
  form1.appendChild(clone1);

  btn1.id = "btn" + i;
}

function delDupe() {

  var clone1 = document.getElementById('clone' + i);

  if (!clone1) {
    return false;
  }

  form1.removeChild(clone1);

  i--;
}

body {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
section {
  position: absolute;
  overflow: auto;
  width: 100vw;
  height: 100vh;
}
form {
  margin-bottom: 30px;
}
label {
  margin-top: 30px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<section>

  <form id="form1" name="form1" method="post">

    <fieldset id='set' class="set">

      <div class="form-group col-md-6">

        <label>Client's Name</label>

        <input type="text" class="form-control" name="client_name" />

      </div>

      <div class="col-md-12 pull-left">

        <button class="btn btn-danger remove" onclick="delDupe()">DEL -</button>

      </div>

    </fieldset>

  </form>


  <div class="col-md-12 pull-left">

    <button type="button" class="btn btn-success add" onclick="duplicate()">ADD +</button>

  </div>

  <div class="pull-right">

    <input type="submit" class="btn btn-success btn-xm submit" name="submit" value="Submit" form="form1" />

  </div>

</section>

Answer 4

试试这个，

$(document).ready(function(){
$("form").on('click','.add',function(){
    var addd = $(".col-md-6").first().clone();
    $(".col-md-12").before(addd);
});
$("form").on('click','.remove',function(e){
    var subb = $(".col-md-6").last().remove();

});
});

使用Jquery复制和删除部分

4 个答案:

段