我使用JQuery创建了一个包含动态元素的div。我可以创建div元素,但我无法删除它!我怎么解决这个问题。
<div class="row" id="bulk">
<div class="col-md-3">
<div class="form-group">
<label>Color</label>
<input type="text" name="color" class="form-control">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Quantity</label>
<input type="text" name="qty" class="form-control">
</div>
</div>
<div class="col-md-3" id="yarn&febric">
<div class="form-group">
<label>Ex-Factory Date</label>
<input id="exfact" type="text" class="form-control" name="exfactdate" placeholder="">
</div>
</div>
</div>
我的JQuery Part。
$(document).ready(function(){
var bulknitdown=$('#bulk').html();
$('.add').click(function(){
$('#bulk').append(bulknitdown);
});
$('.remove').click(function(){
bulknitdown.last().remove();
});
});
答案 0 :(得分:1)
你必须通过包装div类来克隆HTML代码。检查下面的代码片段,您将很容易理解。
我希望这适合你。
$(document).ready(function(){
var bulknitdown="<div class='row'>"+$('#bulk .row').first().html()+"</div>";
$('.add').click(function(){
$('#bulk').append(bulknitdown);
$('#bulk .row').last();
});
$('.remove').click(function(){
if($('#bulk .row').length>1){
$('#bulk .row').last().remove();
}
else{
alert("no extra row found for remove");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bul_container">
<div id="bulk">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Color</label>
<input type="text" name="color" class="form-control">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Quantity</label>
<input type="text" name="qty" class="form-control">
</div>
</div>
<div class="col-md-3" id="yarn&febric">
<div class="form-group">
<label>Ex-Factory Date</label>
<input id="exfact" type="text" class="form-control" name="exfactdate" placeholder="">
</div>
</div>
</div>
</div>
</div>
<button id="add_btn" class="add">Add New</button>
<button id="remove_btn" class="remove">Remove Last</button>