javascript - 删除动态创建的内部选定 div

Question

我一直在环顾四周，但我还没有找到解决方案。我的代码是这样的：

$('#addDiv').click( function() {

          var divNum = divNum + 1;
          var newdiv = document.createElement('div');
          var divIdName = 'mydiv';
          newdiv.setAttribute('id',divIdName+divNum);
          newdiv.className = 'imgDiv';

});

$('#cont-div').on('click', function(e) {

        //REMOVE clicked div

});

我有一个名为“cont-div”的 div，其中包含动态创建的 div。可能解决方案非常简单，但我找不到一种方法来识别“cont-div”中单击的 div，因此我可以将其删除。

Answer 1

您可以使用事件委托，因为divs 是动态创建的：

$('#cont-div').on('click', 'div', function(e) {

        //REMOVE clicked div
        $(this).remove();

});

Answer 2

嗯，您的代码意味着您可能有多个具有相同 ID 的元素。不要那样做，那样会让事情变得更难。只需使用您设置的类：

$('.imgDiv').on('click', function() {
    $(this).remove();
});

Answer 3

$('#cont-div div').on('click', function(e) {

    var clickedDiv = e.target;

    if(clickedDiv != e.currentTarget)
    {
        //Remove the clicked div if it is not the parent.
        $(this).remove();
    }

});

Answer 4

您可以使用 jquery remove() 删除元素。此外，您还需要一个委托来简单地处理动态插入的元素上的事件。

工作演示

html:

<input id="addDiv" type="button" value="click!" />

Javascript：

$(function(){
    $('body').on('click','.imgDiv',function(){
        $(this).remove();
    });
});

编辑：缩短代码片段，现在只显示相关部分。