Javascript onclick hide div

时间:2011-04-01 15:32:29

标签: javascript

我想在其中使用javascript隐藏此警告div。

我正在使用javascript吗?当我点击关闭图标(images / close_icon.gif)

时,我想隐藏/关闭div
<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>

4 个答案:

答案 0 :(得分:47)

如果要关闭它,可以将其隐藏或从页面中删除。要隐藏它,你会做一些像:

这样的javascript
this.parentNode.style.display = 'none';

要删除它,请使用removeChild

this.parentNode.parentNode.removeChild(this.parentNode);

如果你有一个像jQuery这样的库,那么隐藏或删除div会稍微容易一些:

$(this).parent().hide();
$(this).parent().remove();

另外一件事,因为你的img在一个锚中,锚点上的onclick事件也将被触发。当href设置为#时,页面将滚动回页面顶部。通常情况下,如果您希望链接执行除href之外的其他操作,则应将onclick事件设置为return false;

答案 1 :(得分:18)

简单&amp;最好的方式:

onclick="parentNode.remove()"

从html删除完整的父级

答案 2 :(得分:13)

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

}

答案 3 :(得分:7)

只需为锚标记添加onclick处理程序

onclick="this.parentNode.style.display = 'none'"

或更改img标签的onclick处理程序

onclick="this.parentNode.parentNode.style.display = 'none'"