javascript - 如何使用 JQuery 删除动态创建的元素？

Question

我使用 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 部分。

  $(document).ready(function(){

var bulknitdown=$('#bulk').html();
$('.add').click(function(){

        $('#bulk').append(bulknitdown);

});
$('.remove').click(function(){
    bulknitdown.last().remove();
});
});

Answer 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>