Close button on everything 33

by Christopher O

HTML

<div class="wrapper"><div class="panel" id="A"><span>Something</span></div></div>
<div class="wrapper"><div class="panel" id="B"><span>Anything</span></div></div>
<div id="status">&nbsp;</div><div id="status2">&nbsp;</div><div id="status3">&nbsp;</div>

CSS

.wrapper{
  background-color:#eee;
  width:200px;
  margin-bottom:10px;
}
.panel{
    width:100px;
    height:100px;
    background:white;
    border:1px solid #aaa;
    margin:40px;
    display:block;
}
.panel > span{
  font-size:20px;
}
.close{
    position:absolute;
    z-index:1000;
    /* width:10px;
    height:10px */;
    background-repeat: no-repeat;
    background:...

JavaScript

console.clear(); // debug
var mouse = {}; // new object to hold mouse position
var closeBtnSize = 16;

// on mousemove listner
$("html").mousemove(function(e){
  mouse.x = e.pageX;
  mouse.y = e.pageY;
  $("#status").text("x:" + mouse.x + ", y:" + mouse.y);
});

$(document).on('mouseenter', '.wrapper', function(){
    // Mouse enter
    wrapper = this;
    itm = $(wrapper).children().first();
    id = $(itm).attr('id');
    
    $("#status2").text("Enter: " + id + " @ " + mouse.x + ", " + mouse.y);
    
    // if close button doesn't exist
    if($("#" + id+"-CLOSER").length == 0) {

      pOffset = $(itm).offset(); // .panel xy relative to document

      div = $("<div>", {
        "id":     id+"-CLOSER",
        "class":  "close",
        "style":  "top: " + pOffset.top + "px; left: " + (pOffset.left + $(itm).width() - closeBtnSize + 2) + "px; width:"+closeBtnSize+"px; height:"+closeBtnSize+"px; background-size: "+closeBtnSize+"px "+closeBtnSize+"px;",
        "origelm": id
      });
      
      div.click(function(){ 
        console.log( "Clicked: " + $(this).attr('id') );        
        $(this).remove(); // Delete close button
        $(wrapper).remove(); // Delete wrapper (optional)
      });
      
      $("body").append(div); // create close button
    }
    
});


$(document).on('mouseleave', '.wrapper', function(){
    // Mouse leave
    wrapper = this;
    itm = $(wrapper).children().first();
    id = $(itm).attr('id');
    
    $("#status2").text("Leave: " + id + " @ " + mouse.x + ", " + mouse.y);
    
    // if close button exists
    if($("#" + id+"-CLOSER").length != 0) {
    	
      // if mouse is outside .panel
      //--------------------------------
      pos = $(itm).offset(); // xy relative to document, pos.top & pos.left
      pos.width = $(itm).outerWidth(); // includes padding, add true param to include margin
      pos.height = $(itm).outerHeight();
      
      if(
          (mouse.x <= (pos.left + 3) )||
          (mouse.x >= (pos.left...