Close button on everything 22

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"></div>

CSS

.wrapper{
  background-color:#eee;
  padding:10px 0;
  width:200px;
  margin-bottom:10px;
}
.panel{
    width:100px;
    height:100px;
    background:white;
    border:2px solid black;
    margin:15px auto;
}
.panel > span{
  font-size:22px;
}
.close{
    position:absolute;
    z-index:100;
    width:30px;
    height:29px;
    background:...

JavaScript

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

// 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 in
  	wrapper = this;
    itm = $(wrapper).children().first();
    id = $(itm).attr('id');
    
    // if close button doesn't exist
    if($("#" + id+"-CLOSER").length == 0) {
    
      //pad = 3;

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

      console.log("Add: " + id + "-CLOSER, Wrapper: " + "L: " + wOffset.left + ", R: " + (wOffset.left + $(wrapper).outerWidth()) + ", T: " + wOffset.top + ", B: " + (wOffset.top + $(wrapper).outerHeight()) );

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

$(document).on('mouseleave', '.wrapper', function(){
		// Mouse out
    wrapper = this;
    itm = $(wrapper).children().first();
    id = $(itm).attr('id');
    
    // if close button exists
    if($("#" + id+"-CLOSER").length != 0) {
    
      pos = $(wrapper).offset(); // xy relative to document, pos.top & pos.left
      pos.width = $(wrapper).outerWidth(); // includes padding, add true param to include margin
      pos.height = $(wrapper).outerHeight();

      // If mouse is outside of wrapper
    ...