Javascript onclick 隐藏 div答案

【问题标题】：Javascript onclick hide divJavascript onclick 隐藏 div
【发布时间】：2011-07-27 19:06:36
【问题描述】：

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

我得到的 javascript 对吗？我想在单击关闭图标时隐藏/关闭 div (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>

【问题讨论】：

你使用像 jquery 或 raw javascript 这样的库吗？

标签： javascript

【解决方案1】：

如果您想关闭它，您可以将其隐藏或从页面中删除。要隐藏它，你会做一些像这样的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，但他在img 上有onclick，而不是a，所以这将是this.parentNode.parentNode.style.display = 'none'; 和类似的this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);。除非你建议移动它。 :-)
公平点，我在编辑之前误读了这个问题。无论如何，如果事件在主播上会更好。
同意，这也是我推荐的。
如果您想知道，您还可以使用 this.parentNode.style.display = 'block'; 再次显示（取消隐藏？）元素
或this.parentNode.style.display = ''，这将使浏览器使用显示属性的原始值。

【解决方案2】：

简单而最好的方法：

onclick="parentNode.remove()"

从 html 中删除完整的父级

【讨论】：

【解决方案3】：

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

}

【讨论】：

嗨，克里斯。谢谢你。不过我有一个疑问，有什么办法可以给它添加“过渡效果”吗？通过过渡，我的意思是，'hideme' div 将以线性样式关闭 2 秒，类似这样。再次感谢！
当然，你可以使用javascript设置元素为overflow:hidden，然后使用timeout或setinterval，你可以将div的高度降低到0。不过这样的效果会很多使用 JQuery .animate() 更容易

【解决方案4】：

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

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

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

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

【讨论】：