Post It functionality

Ref: http://stackoverflow.com/questions/42454629/jquery-removed-elements-are-still-displayed

by Vivek Athalye

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<form class="hidden">
<input id="note"> <br/>
<input id="pos" type="hidden">
<input id="nueva-nota" type="button" value="Post It">
</form>

CSS

.hidden {
  display: none;
}

.postit {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.close {
  float: right;
  color: white;
  background-color: red;
  width: 20px;
  height: 20px;
}

JavaScript

$(function(){
  $('input#nueva-nota').on('click', onclickButton);
  $(document).on('dblclick', ondblclickHtml);
})

// Event handler dblclick on browser window: Form is made visible
function ondblclickHtml(event) {
  var x = event.clientX;
  var y = event.clientY;

  // Show form (fade in)
  $('form').fadeIn(1000);
  $('form').removeClass('hidden');
  $('input#note').focus();
  
  $('input#pos').val(JSON.stringify({'left': x, 'top': y}));
} 


// Event handler for onclick form button
function onclickButton(event) {

  $('form').fadeOut(1000); // Form fades out

  var msg = $('input#note').val();
  displayPostIt(msg);
} 

function displayPostIt(msg) {
  var $divPostIt = $('<div class="postit"></div>');
  var $closeDiv = $('<div class="close">x</div>');
  // Bind click event on close div
  $closeDiv.on('click', onclickCloseDiv);
  var $msgDiv = $('<div class="msg">' + msg + '</div>');
  var pos = JSON.parse($('input#pos').val());
  $divPostIt.css(pos);
  $divPostIt.append($closeDiv);
  $divPostIt.append($msgDiv);
  $('body').append($divPostIt); // Finally, append the PosIt div to the body
}

function onclickCloseDiv(event) {
  console.log("onclickCloseDiv ...");
  var divPostIt = $(this).parent();
  divPostIt.remove();
}