单击时从dom中删除元素

Question

点击后我在body标签后附加了一个元素。目前我将其设置为在单击该元素时被删除。我想在单击文档中的任何内容时更改代码以将其删除。

$(document).on('click', 'body', function() {
    if ($('#myEm').length > 0) {
        $('#myEm').remove();
    }
});

但是，当我测试时，我总是得到1的计数，因为在我的脚本运行之前，元素实际上被添加到了body中。所以，会发生什么，我的元素永远不会显示，因为我马上关闭它。

我如何解决这个问题？我是否会添加某种延迟？

JSFIDDLE

更新：working code

Answer 1

您的跨度上的click事件正在将DOM冒泡到body元素，并触发其上的click事件，并删除刚刚添加的元素。

使用stopPropagation()来阻止冒泡：

$('.clickMe').click(function (e) {
    e.stopPropagation();
    $('body').append('<div id="myEm">dynamic element</div>');
});

<强> jsFiddle example

另请注意，您的整体逻辑似乎有点瑕疵，因为您的代码允许将多个div添加到具有相同ID的正文中，这是一个禁止的。