Question

I have this jsfiddle which works once.

function toggle_off(itemID){
  alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
  document.getElementById(itemID).style.display = 'none';
}

function maskIt(x){
  alert(x);
  var mask = document.createElement('div');
  mask.id = 'maskIt';
  mask.setAttribute("class", "maskIt");
  mask.onclick = function(){toggle_off('maskIt');}
  mask.innerHTML = 'click to close mask';
  document.body.appendChild(mask);
}

On click it opens a mask (layer), on mask click – closes it self – all fine up to here.

On second click, the mask opens again, but when you click on it the second time it won’t close.

Any ideas?

Answer 1

Instead of hiding the div you should remove it as you are creating a new div each click

function toggle_off(itemID){
  alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
  var mask = document.getElementById(itemID);
  mask.parentNode.removeChild(mask);
}

DEMO