Question

我有一个订阅框，我试图做一个X关闭按钮，该按钮记得下次不会在Web存储或cookie中显示。当我单击关闭按钮时，我的整个侧栏设置为不显示任何内容。代替id =“ gfxhsub”。

JavaScript

window.onload = function(){
    document.getElementById('mailclose').onclick = function(){
        this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
       return false;
    };
};

html

<div id="gfxhsub" style="margin: 2em 0.5em; height: auto;">
<span id='mailclose'><i class="fa fa-times"></i></span>
[newsletter_signup_form id=6]
</div>

Answer 1

在CSS中创建.d-none类，只需使用document.getElementById('gfxhsub').classList += "d-none"而不是this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode);

.d-none {
  display: none
}

<div id="gfxhsub" style="margin: 2em 0.5em; height: auto;">
  <span id='mailclose'><i class="fa fa-times"></i>X</span> [newsletter_signup_form id=6]
</div>

<script type="text/javascript">
  window.onload = function() {
    document.getElementById('mailclose').onclick = function() {
      document.getElementById('gfxhsub').classList += "d-none"
      return false;
    };
  };
</script>

Answer 2

一个人可以使用DOM操作...

document.getElementById('mailclose').onclick = function() {
    var ele = document.getElementById('gfxhsub');
    ele.style.display = 'none';
    return false;
};

Answer 3

您的html显示gfxhsub是mailclose的直接父级。但是，在您的匿名函数中，您将删除gfxhsub的父级的父级。与其使用这么多的parentNode，不如尝试

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

另外，您的问题是询问是否将显示设置为无，而不是从DOM中删除节点。为此，您可以使用

this.parentNode.style.display = 'none';

Answer 4

这指向<span id='mailclose'>

this.parentNode指向<div id="gfxhsub">

this.parentNode.parentNode指向<div>父级（边栏？）

this.parentNode.parentNode.ParentNode指向<div>祖父母

因此，当您调用removeChild时，您是在<div id="gfxhsub">的祖父母那里进行的，并告诉它删除<div id="gfxhsub">的父母。

您想要做的（只需最少的更改，并假设您要删除节点而不隐藏它）是

<script type="text/javascript">
window.onload = function(){
document.getElementById('mailclose').onclick = function(){
var gfxhsub = document.getElementById('gfxhsub');
gfxhsub.parentNode.removeChild(gfxhsub);
return false;
};
};
</script>

脚本不记得将div设置为不显示

4 个答案: