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

綁定click for 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();
   }
});

Answer 3

正如在看到這個帖子 ，你必須使用

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

代替

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