Jquery - 无法删除动态创建的元素

Question

我使用BootStarp3 作为骨架。我正在动态创建几个元素（在单击按钮时），可以选择使用另一个按钮删除每个创建的元素。问题是我只能删除第一个元素，其他创建的动态按钮似乎没有反应，不知道出了什么问题。

JSfiddle 代码在这里。

HTML：

<div id="reward-container">
    <div class="center-block col-lg-10 col-md-10 col-sm-12 text-left" id="">
           <div class="center-block col-centered bg-white review text-left"> 
            <div class="row">
                <div class="col-lg-6 col-md-5 col-sm-5">
                  <div class="form-group form-group-default">
                    <label>label</label>
                    <input type="text" class="form-control" placeholder="e.g">
                  </div>
                </div>
              </div>
        </div>

   <button class="btn btn-sm pull-right remove"><b>Remove</b></button>
    </div> 
</div>

<button class="btn btn-lg btn-info m-t-70 marg" id="add">add more</button>

JS：

$("#add").click(function(){
    var count = $("#reward-container").children();
    existingRewards = $("#reward-container").children();
       var newGift = $('<div class="center-block col-lg-10 col-md-10 col-sm-12 text-left marg" id='+count+'> \
                   <div class="center-block col-centered bg-white review text-left"> \
                    <div class="row"> \
                        <div class="col-lg-6 col-md-5 col-sm-5"> \
                          <div class="form-group form-group-default"> \
                            <label class="to-uppercase">label</label> \
                            <input type="text" class="form-control" placeholder="e.g"> \
                          </div> \
                        </div> \
                      </div> \
                </div> \
                <button class="btn btn-sm pull-right remove"><b>Remove</b></button> \
            </div>');
    $(newGift).appendTo("#reward-container");

});

//remove field

$(".remove").click(function(e){
    console.log("remove clicked");
    var father=e.target.parentElement.parentElement;
    existingRewards = $("#reward-container").children();
    if(existingRewards.length==1){
        console.log("one field remains");
    }else{
        $(father).remove();
    }
});

Answer 1

那是因为您需要事件委托。当前，您将单击处理程序附加到 .remove 元素，但它们不存在（您动态生成它们）。要捕获对新元素的点击，请将点击处理程序更改为如下内容：

$("#reward-container").on("click", ".remove", function (e) { ... });

您还可以改进您的功能以使用closest 方法而不是使用父母导航：

$("#reward-container").on("click", ".remove", function(e){
    console.log("remove clicked");
    var $div = $(this).closest("div.center-block");
    existingRewards = $("#reward-container").children();
    if(existingRewards.length==1){
         console.log("one field remains");
    }else{
         $div.remove();
    }
});

JSFiddle

有关更多信息，请参阅我的其他类似答案：

• https://stackoverflow.com/a/22041545/1420197
• https://stackoverflow.com/a/26635666/1420197
• https://stackoverflow.com/a/33082173/1420197
• https://stackoverflow.com/a/20772868/1420197
• https://stackoverflow.com/a/21657356/1420197
• https://stackoverflow.com/a/19914424/1420197

Answer 2

见this post ，你必须使用

$('body').on('click', '.remove', function() {
    // do something
});

代替

$(".remove").click( function() {
    // do something
});

Answer 3

当您绑定点击删除时，只有一个类为remove 的元素。当您添加另一个元素时，您应该再次绑定该点击。

$("#add").click(function(){
var count = $("#reward-container").children();
existingRewards = $("#reward-container").children();
   var newGift = $('<div class="center-block col-lg-10 col-md-10 col-sm-12 text-left marg" id='+count+'> \
               <div class="center-block col-centered bg-white review text-left"> \
                <div class="row"> \
                    <div class="col-lg-6 col-md-5 col-sm-5"> \
                      <div class="form-group form-group-default"> \
                        <label class="to-uppercase">label</label> \
                        <input type="text" class="form-control" placeholder="e.g"> \
                      </div> \
                    </div> \
                  </div> \
            </div> \
            <button class="btn btn-sm pull-right remove"><b>Remove</b></button> \
        </div>');
$(newGift).appendTo("#reward-container");
$(".remove").click(function(e){
    console.log("remove clicked");
    var father=e.target.parentElement.parentElement;
    existingRewards = $("#reward-container").children();
    if(existingRewards.length==1){
        console.log("one field remains");
    }else{
        $(father).remove();
    }
});

//remove field

$(".remove").click(function(e){
   console.log("remove clicked");
   var father=e.target.parentElement.parentElement;
   existingRewards = $("#reward-container").children();
   if(existingRewards.length==1){
      console.log("one field remains");
   }else{
      $(father).remove();
   }
});