I want to hide this warning div using javascript inside it.
I'm i getting the javascript right? I want to hide/close the div when i click on the close icon (images/close_icon.gif)
<div>
<strong>Warning:</strong>
These are new products
<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="this.close" />
</a
</div>
If you want to close it you can either hide it or remove it from the page. To hide it you would do some javascript like:
this.parentNode.style.display = 'none';
To remove it you use removeChild
this.parentNode.parentNode.removeChild(this.parentNode);
If you had a library like jQuery included then hiding or removing the div would be slightly easier:
$(this).parent().hide();
$(this).parent().remove();
One other thing, as your img is in an anchor the onclick event on the anchor is going to fire as well. As the href is set to # then the page will scroll back to the top of the page. Generally it is good practice that if you want a link to do something other than go to its href you should set the onclick event to return false;
onclick on the img, not the a, so that would be this.parentNode.parentNode.style.display = 'none'; and similarly this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);. Unless you recommend moving it. :-)
this.parentNode.style.display = 'block';this.parentNode.style.display = '' which will make the browser use the original value for the display property.Simple & Best way:
onclick="parentNode.remove()"
Deletes the complete parent from html
HTML
<div id='hideme'><strong>Warning:</strong>These are new products<a href='#' class='close_notification' title='Click to Close'><img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" /></a
Javascript:
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
just add onclick handler for anchor tag
onclick="this.parentNode.style.display = 'none'"
or change onclick handler for img tag
onclick="this.parentNode.parentNode.style.display = 'none'"
