JSFiddle - React, Tailwind, and code Playground

HTML

<div id="out">
<div id="container">
    <div id="test"></div>
</div>
</div>

CSS

div#container {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
}

div#out{
    width: 500px;
    height: 500px;
}

div#test {
    width: 20px;
    height: 20px;
    top: 0px;
    left: 0px;
    background-color: yellow;
}

.rot {
    
}

JavaScript

(function($){
       $.fn.outside = function(ename, cb){
          return this.each(function(){
             var $this = $(this),
                 self = this;
             $(document.body).bind(ename, function tempo(e){
                 if(e.target !== self && !$.contains(self, e.target)){
                    cb.apply(self, [e]);
                    if(!self.parentNode) $(document.body).unbind(ename, tempo);
                 }
             });             
          });
       };
}(jQuery));


$(function(){    
    
    
    $('#container').outside('click', function(e){
        $(this).remove();
    }); 
});