jquery - 使用 Jquery 从 DOM 中删除元素

Question

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

我该如何解决这个问题？
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>

JS

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

Answer 1

问题出在 event delegation动态添加的对象。

DEMO

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

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

}); //END Delete flak