从Jquery中删除DOM元素

我有一些静态div和一些div由jquery添加。
我需要一个“删除元素”按钮。
我使用Jquery从DOM中删除元素。
我的问题是，我只能删除静态元素，而不是“后来由jquery添加”。
从Jquery中删除DOM元素

我怎样才能解决这个问题？
FIDDLE： http://jsfiddle.net/7hqu377v/3/

HTML

<div class="col-md-1"> 
    <button class="btn btn-success" id="btnAddFlak">+ Flak</button> 
</div> 
<div class="well" id="flakDiv"> <span class="deleteFlak pull-right">x</span> 
    <div class="flak nopadding"> 
    <div class="flakSideUp nopadding"></div> 
    <div class="flakMiddle">Flak <b><span>1</span></b> 
    </div> 
    <div class="flakSideDown nopadding"></div> 
    </div> 
</div>

var flakNr = 1; 
//Create flak 
$('#btnAddFlak').on('click', function() { 

    //Set flakNr 
    flakNr = $('.flakMiddle').last().find("span").text(); 
    if (isNaN(flakNr)) flakNr = 1; 


    //Increase flakNr 
    flakNr++; 

    //Flak HTML setup 
    var flak = $('<span class="deleteFlak pull-right">x</span><div class="flak nopadding"><div class="flakSideUp nopadding"></div><div class="flakMiddle">Flak <b><span>' + flakNr + '</span></b></div><div class="flakSideDown nopadding"></div></div><br>'); 

    //Insert flak to flakDiv 
    $('#flakDiv').append(flak); 
    }); 

    //Delete flak 
    $('.deleteFlak').on('click', function() { 

    //Remove flak from DOM 
    $(this).next('.flak').remove(); 
    $(this).remove(); 

}); //END Delete flak

来源

2015-09-02 Björn C

的问题是与动态添加对象的event delegation。

DEMO

//Delete flak 
$(document).on('click', '.deleteFlak', function() { 

    //Remove flak from DOM 
    $(this).next('.flak').remove(); 
    $(this).remove(); 

}); //END Delete flak

来源

2015-09-02 12:07:37 RRK

完美。谢谢！ –

后创建的元素，你应该绑定事件。

我复制你的代码，并创造新的元素后，我重新绑定click envents。

var flakNr = 1; 
//Create flak 
$('#btnAddFlak').on('click', function() { 

    //Set flakNr 
    flakNr = $('.flakMiddle').last().find("span").text(); 
    if (isNaN(flakNr)) flakNr = 1; 


    //Increase flakNr 
    flakNr++; 

    //Flak HTML setup 
    var flak = $('<span class="deleteFlak pull-right">x</span><div class="flak nopadding"><div class="flakSideUp nopadding"></div><div class="flakMiddle">Flak <b><span>' + flakNr + '</span></b></div><div class="flakSideDown nopadding"></div></div><br>'); 

    //Insert flak to flakDiv 
    $('#flakDiv').append(flak); 

    // here you should remove the older 'click' events. And create new events for ALL. Because the events are only attached to the oldest elements 
    $('.deleteFlak').unbind('click').click(function() { 
      //Remove flak from DOM 
      $(this).next('.flak').remove(); 
      $(this).remove(); 
    }); //END Delete flak 
}); 

    //Delete flak 
$('.deleteFlak').click(function() { 
     //Remove flak from DOM 
     $(this).next('.flak').remove(); 
     $(this).remove(); 
}); //END Delete flak

来源

2015-09-02 12:07:39 Victor

每当你需要访问，稍后通过JavaScript添加的元素，通过的$（document）访问它们，就像这样：

$(document).on('click', '.deleteFlak', function() { 
//Remove flak from DOM 
    $(this).next('.flak').remove(); 
    $(this).remove(); 

}); //END Delete flak

来源

2015-09-02 12:09:24 Bryan

从Jquery中删除DOM元素

回答

相关问题