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

我使用BootStarp3作为骨架。我在点击按钮时动态地创建了几个元素，可以选择用另一个按钮删除每个创建的元素。问题是，我只能删除第一个元素，其他动态创建的按钮似乎没有反应，无法找出问题所在

代码在这里

HTML:

JS:

---

这是因为您需要事件委派。当前，您正在将单击处理程序附加到.remove元素，但它们不在那里，您可以通过友好方式生成它们。要捕获对新元素的单击，请将单击处理程序更改为以下内容：

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

您还可以改进功能，使用最接近的方法，而不是使用父对象导航：

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

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

---

这是因为您需要事件委派。当前，您正在将单击处理程序附加到.remove元素，但它们不在那里，您可以通过友好方式生成它们。要捕获对新元素的单击，请将单击处理程序更改为以下内容：

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

您还可以改进功能，使用最接近的方法，而不是使用父对象导航：

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

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

---

当您单击以删除绑定时，只有一个元素具有类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();
   }
});

---

当您单击以删除绑定时，只有一个元素具有类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();
   }
});

如图所示 ，你必须使用

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

而不是

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

如图所示 ，你必须使用

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

而不是

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

---

谢谢你的回答。为了理解这一点，对于动态创建的元素，我需要捕获click事件，因为创建的元素在页面创建时没有在DOM中注册？@undroid！你明白了。使用$.remove可以选择页面上的现有元素。使用我的解决方案，您选择容器并说：当有人单击此容器时，如果单击的是.remove元素，则捕获它！真是太神奇了。再次感谢！另一个简短的问题。单击按钮时，有时会在父容器而不是按钮本身上注册单击，具体发生了什么？在本例中，我仅在单击按钮上的文本时才捕捉到按钮单击。@undroid是的，我修复了它。使用“最近的”查看编辑：很高兴我帮了忙。谢谢你的回答。为了理解这一点，对于动态创建的元素，我需要捕获click事件，因为创建的元素在页面创建时没有在DOM中注册？@undroid！你明白了。使用$.remove可以选择页面上的现有元素。使用我的解决方案，您选择容器并说：当有人单击此容器时，如果单击的是.remove元素，则捕获它！真是太神奇了。再次感谢！另一个简短的问题。单击按钮时，有时会在父容器而不是按钮本身上注册单击，具体发生了什么？在本例中，我仅在单击按钮上的文本时才捕捉到按钮单击。@undroid是的，我修复了它。使用“最近的”查看编辑：很高兴我帮了忙。