Show a div onclick and hide the image that triggered it

Question

I would like to use the following code to display a hidden div onclick, but then when the it is displayed, I want the image that I used to trigger it to disappear. Here is what I have so far:

HTML:

<img src="Icons/note_add.png" onclick="show('comment')"/>&nbsp;&nbsp;<div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea>&nbsp;<a href="#" class="buttonintable">Submit</a></div>

JS:

function show(target){
document.getElementById(target).style.display = 'block';
}
function hide(target){
document.getElementById(target).style.display = 'none';
}

How do adjust this to hide the element that fired it?

Answer 1

Jimmy's answer will work, however to get it to show back up (I assume you want that) you should add an id to the image tag... The following should work.

<img id="clickMeId" src="Icons/note_add.png" onclick="show('comment')"/>&nbsp;&nbsp;<div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea>&nbsp;<a href="#" class="buttonintable">Submit</a></div>

function show(target){
document.getElementById(target).style.display = 'block';
document.getElementById("clickMeId").style.display = 'none';
}
function hide(target){
document.getElementById(target).style.display = 'none';
document.getElementById("clickMeId").style.display = 'block';
}

Answer 2

[edited]

Change the function to this:

function show(this, target){
    document.getElementById(target).style.display = 'block';
    this.style.display = 'none';
}

And the onclick attribute to this:

<img onclick="show(this, 'comment')" />