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

问题描述

我使用 BootStarp3 作为骨架。我动态地创建了几个元素（点击按钮），并且可以使用另一个按钮删除每个创建的元素。问题是我只能删除第一个元素，其他创建的动态按钮似乎没有反应，无法弄清楚什么是错的。

代码在这里。

HTML：

 < div id =reward-container> 
< div class =center-block col-lg-10 col-md-10 col-sm-12 text-leftid => 
< 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> 
< input type =textclass =form-controlplaceholder =例如> 
< / div> 
< / div> 
< / div> 
< / div> 
 
< button class =btn btn-sm pull-right remove>< b>移除< / b>< / button> 
< / div> 
< / div> 
 
< button class =btn btn-lg btn-info m-t-70 margid =add> add more< / button> 
  

JS：

  var count = $（＃reward-container）。children（）; 
 existingRewards = $（＃$奖励容器）。children（）; 
 var newGift = $（'< div class =center-block col-lg-10 col-md-10 col-sm-12 text-left margid ='+ 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-默认值> \ 
< label class =to-uppercase> label< / label> \ 
< input type =textclass =form-controlplaceholder = eg> \ 
< / div> \ 
< / div> \ 
 < / div> \ 
< / div> \ 
< button class =btn btn-sm pull-right remove>< b>移除< / b>< / button> \ 
< / div>'）; 
 $（newGift）.appendTo（＃reward-container）; 
 
}）; 
 $ b //删除字段
 
 $（。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 元素，但它们不在那里（您可以通过它们生成它们）。点击新元素可将点击处理程序更改为如下所示：

  $（＃reward-container） .on（click，.remove，function（e）{...}）; 
  

您也可以改进函数以使用最接近方法而不是使用父母导航：

  $（＃reward-container）。on（click， .remove，函数（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（）; 
} 
}）; 
  

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

li>








ul>


I'm using BootStarp3 as the skeleton. I'm creating several elements dynamically (on button click), with the option to delete each created element with another button. The problem is that I'm only able to delete the first element, other created dynamically buttons don't seem to react, can't figure out what is wrong.

JSfiddle code here.

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();
    }
});

解决方案

That's because you need event delegation. Currently you're attaching the click handler to the .remove elements, but they are not there (you dinamically generate them). To catch the click on the new elements change the click handler into something like this:

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

You can also improve your function to use the closest method instead of navigating using parents:

$("#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

For more information, see my other similar answers:

• 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

这篇关于jquery - 无法删除动态创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！