Javascript 如何使用jquery操作动态创建的元素？

我是jquery新手，我正在用jquery创建框，然后“删除”它们。但是我想使用相同的代码删除已创建元素范围和已创建元素范围中的框

Html:

Cria

JS:

var框={
创建：函数（）{
变量框=$（''）；
var delBtn=$（''）；
框。附录（“#main”）；
delBtn.附录（方框）；
},
销毁：功能（elem）{
元素衰减（）；
} 
}
函数deleteBox（）{
}
$（函数（）{
$（“#创建”）。单击（函数（）{
box.create（）；
});
$（'.del btn'）。单击（函数（）{
var elem=$（this.parent（）；
盒.销毁（elem）；
返回false；
});
});

如果我把delete事件放在createclick事件中，我就可以删除动态创建的元素。如果我把它放在外面，那么我可以删除HTML中的元素。我知道这是一个简单的问题，但我不知道如何解决它。谢谢

您可以使用：

---

非常感谢你，穆奇。完美解决

<button id="create">Cria</button>
    <div id="main">
        <div class="box">
            <a class="del-btn" href="#">Delete</a>
        </div>
</div>

    var box = {

  create: function() {
      var box = $('<div class="box">');
      var delBtn = $('<a class="del-btn" href="#">Delete</a>');
      box.appendTo('#main');
      delBtn.appendTo(box);
  },

  destroy: function(elem) {
    elem.fadeOut();
  } 

}

function deleteBox () {

}

$(function() {

  $('#create').click(function() {
    box.create();
  });

  $('.del-btn').click(function() {
    var elem = $(this).parent();
    box.destroy(elem);  
    return false;
  });

});

$("#main").on("click", ".del-btn", function() {
    var elem = $(this).parent();
    box.destroy(elem);  
    return false;
});