单击 div 元素以外的任何其他位置时删除 div 元素[重复]

Question

我在删除使用 JavaScript 创建的 div 元素时遇到了麻烦。我将此函数称为 onclick 元素。

function makediv(){
        var div = document.createElement('DIV');
        $(div).attr('id','md');
        $(div).css({"left":e.pageX,"top":e.pageY });
        $("body").append(div);
    }

当我单击该 div 以外的其他位置时，我正在尝试删除。 在我点击其他地方之前，div 甚至显示它刚刚在它创建的那一刻被删除。

window.onclick = function(event)
    {           
        dl=$('#md');
        if(event.target!=dl)
            dl.remove();
    }

这个我也试过了。

window.onclick = function(event)
    {
        if($('#md').length!=0){

        dl=$('#md');
        if(event.target!=dl)
            dl.remove();
        }
    }

但此代码在创建时删除了 div 元素。

Answer 1

您可以使用jQuery 来编写更短更简单的代码。

function makediv() {
  $("body").append("<div id='md'></div>");
}

$(document).ready(function() {
  makediv(); /* Call the function to add the div */
});

$(document).click(function(e) {
  /* Check if id is mb. If it is not, remove the div */
  if ($(e.target).attr("id") != "md") $("#md").remove();
});

#md {
  width: 100px;
  height: 100px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>