CODEWITHSUNDEEP
javascript
DextrousDave
DextrousDave

Reputation: 6793

Hide parent element with onclick function

I use jQuery most of the time, so I am having a bit of trouble with the following (simple) javascript:

I want to dismiss(hide) the parent element of a p tag when clicking on it:

HTML:

<div class="parent">
     <p id="dismiss" onclick="dismiss();">dismiss this box</p>
</div>

JS:

function dismiss(){
    document.getElementById('dismiss').pDoc.parentNode.style.display='none';
};

Fiddle: http://jsfiddle.net/CUqmn/3/

But this is not working. What would be the correct code?

Thanks

Upvotes: 6

Views: 25662

Answers (3)

one2three
one2three

Reputation: 1

You could try:

HTML:

<div class="parent">
     <p id="dismiss" onclick="dismiss(this.parentNode);">dismiss this box</p>
</div>

JS:

function dismiss(delete){
    delete.style.display='none';
};

This will delete the parent element. Also I just recently found out that you can hide the parent of a parent element like this:

HTML:

<div class="parent">
     <p id="dismiss" onclick="dismiss(this.parentNode);">dismiss this box</p>
</div>

JS:

function dismiss(delete){
    delete.parentNode.style.display='none';
};

Not relevant to this but if you ever want to try it it's there.

Sorry for my really late reply. 2 years later lol.

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

http://jsfiddle.net/CUqmn/4/

function dismiss(){
      document.getElementById('dismiss').parentNode.style.display='none';
};

BTW, as jsfiddle wrap javascript code in loader function, use no wrap in left select box to get it work on jsfiddle.

Upvotes: 15

user405398
user405398

Reputation: 

<div class="parent">
 <p id="dismiss" onclick="dismiss(this);">dismiss this box</p>
</div>

function dismiss(el){
  el.parentNode.style.display='none';
};

Upvotes: 8

Related Questions