32

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>
acm
  • 6,541
  • 3
  • 39
  • 44
karto
  • 3,538
  • 8
  • 43
  • 68

4 Answers4

51

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;

Coin_op
  • 10,568
  • 4
  • 35
  • 46
  • 2
    +1, but he has the `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. :-) – T.J. Crowder Apr 01 '11 at 15:57
  • Fair point, I misread the question before it was edited. It'd be better if the event was on the anchor anyway. – Coin_op Apr 01 '11 at 15:59
  • Agreed, that's what I recommended too. – T.J. Crowder Apr 01 '11 at 16:01
  • If you're wondering, you can also show (unhide?) the element again by using `this.parentNode.style.display = 'block';` – ashes999 Oct 30 '15 at 18:52
  • 1
    or by `this.parentNode.style.display = ''` which will make the browser use the original value for the display property. – Coin_op Nov 26 '15 at 01:58
  • Don't use jQuery's `#hide` and `#remove` functions. The performance is terrible - see https://github.com/jquery/jquery.com/issues/88#issuecomment-72400007 – Cody Duval Mar 25 '16 at 17:30
26

Simple & Best way:

onclick="parentNode.remove()"

Deletes the complete parent from html

Amir Savand
  • 365
  • 5
  • 13
16

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';

}
Chris Sobolewski
  • 12,819
  • 12
  • 63
  • 96
  • Hi, Chris. Thanks for this. I have a query though, is there any way I can add a "transition effect" to it? By transition, I mean, the 'hideme' div will close in a linear style for 2 seconds, something like that. Thanks again! – chest_nut Apr 02 '13 at 10:18
  • 1
    Sure, you could set the element to overflow:hidden using javascript, and then using timeouts or setinterval, you could then decrease the height of the div until it reached 0. However, this effect would be much easier with JQuery .animate() – Chris Sobolewski Jun 12 '13 at 18:29
10

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'"
Andrei
  • 4,237
  • 3
  • 25
  • 31