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>
This question is related to
javascript
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;
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';
}
Simple & Best way:
onclick="parentNode.remove()"
Deletes the complete parent from html
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'"
Source: Stackoverflow.com