Close button on everything

by Christopher O

HTML

<div class="panel" id="A"><span>Something</span></div>
<div class="panel" id="B"><span>Anything</span></div>

CSS

.panel{
    width:100px;
    height:100px;
    background:white;
    border:2px solid black;
    margin:50px;
}
.panel > span{
  font-size:22px;
}
.close{
    display:none;
    position:absolute;
    z-index:100;
    width:30px;
    height:29px;
    /*background:url(closeIcon.png) no-repeat center center;*/
    background:...

JavaScript

$(document).on('mouseenter', '.panel', function(){
	var itm = this;
  var id = $(itm).attr('id');
  pad = 3;
  
  var offset = $(itm).offset(); // xy relative to document
  
  var style = "top: " + (offset.top - 25) + "px; left: " + (offset.left + $(itm).width() + pad) + "px;";
  
  // if close button doesn't exist
  if($("#" + id+"-CLOSER").length == 0) {
  
    console.log("Add: " + id + "-CLOSER, " + style);

    var $div = $("<div>", {
      "id":			id+"-CLOSER",
      "class":	"close",
      "style":	style,
      "origelm": id
     });
    $div.click(function(){ 
    	console.log( "Clicked: " + $(this).attr('id') );
      itm = $(this).attr('origelm');
      $("#" + itm).remove();
      $(this).remove();
    });
    $("body").append($div);
    $("#" + id+"-CLOSER").show();
  }
});

$(document).on('mouseleave', '.panel', function(){
	var itm = this;
  var id = $(itm).attr('id');
  
  console.log( "mouseleave: " + id );
  
	setTimeout(function(){
      $("#" + id+"-CLOSER").remove();
  }, 1000);
});