我有下面的代码来动态添加或删除输入字段。
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".col-md-6").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row after-add-more">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control required" name="Categories[]" placeholder="Add Text">
<span class="input-group-btn"><button class="btn btn-success add-more" type="button">ADD</button></span>
</div>
</div>
</div>
</div>
<div class="copy hide">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control required" name="Categories[]" placeholder="Add Text">
<span class="input-group-btn"><button class="btn btn-danger remove" type="button">REMOVE</button></span>
</div>
</div>
</div>
</div>
</div>
现在的问题是,当您单击“添加”按钮时,下一个输入将被创建到上一个字段。
我该如何修正我的代码。我需要对输入字段进行排序。
请在代码中使用append而不是after。
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").append(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".col-md-6").remove();
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句