使用onclick函数隐藏父元素

时间:2013-07-01 08:08:50

标签: javascript

我大部分时间都使用jQuery,所以我在使用以下(简单)javascript时遇到了一些麻烦:

我想在点击它时忽略(隐藏)p标签的父元素:

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

小提琴: http://jsfiddle.net/CUqmn/3/

但这不起作用。什么是正确的代码?

由于

3 个答案:

答案 0 :(得分:13)

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

function dismiss(){
      document.getElementById('dismiss').parentNode.style.display='none';
};
顺便说一句,正如jsfiddle在加载器函数中包装javascript代码一样,在左侧选择框中不使用换行来使它在jsfiddle上运行。

答案 1 :(得分:5)

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

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

答案 2 :(得分:1)

你可以尝试:

HTML:

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

JS:

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

这将删除父元素。另外,我最近发现你可以隐藏父元素的父元素,如下所示:

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

与此无关,但如果你想尝试它就在那里。

很抱歉我的回复很晚。 2年后lol。