Javascript doing something strange? works in IE but not firefox?
<p>I'm trying to create an element onclick and hide the element when it is clicked but it does nothing?</p>

<p>Why does the hide() function do nothing?</p>

<pre><code>&lt;script type="text/javascript"&gt;
function show(){
  var a = document.getElementById('foo');
  var b = document.createElement("div");
  b.setAttribute('id', 'bar');
  b.setAttribute('onclick', 'hide()');
    a.appendChild(b);
b.innerHTML = 'TEXT CONTENT';
b.onclick = function() { 
    hide();
};
} 

function hide() {
    var x = document.getElementById('foo'); 
  var z = document.getElementById('bar');
  x.removeChild(z);
}
&lt;/script&gt;

&lt;div id="foo" onclick="show()"&gt;CLICK ME&lt;/div&gt;
</code></pre>
