Script does not remember to set my div to display none

how to check div is display:none or block in javascript
css show hide div on click
jquery display:none
onclick show div and hide other div
css visibility
style display: none not working
span display: none
class display: none

I have a subscription box and I am trying to make an X close button that remembers to not display next time with web storage or cookies. when i click the close button my whole side bar is set to display none. In stead of just 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>

this points to <span id='mailclose'>

this.parentNode points to <div id="gfxhsub">

this.parentNode.parentNode points to <div> parent (sidebar?)

this.parentNode.parentNode.ParentNode points to <div> grandparent

So when you call removeChild, you are doing so on <div id="gfxhsub">'s grandparent and telling it to remove <div id="gfxhsub">'s parent.

What you want to do (with minimal changes and assuming you want to remove the node and not hide it) is

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

Using CSS together with JavaScript to show content, When the user clicks on the p element, a function called myFunction() is executed​, which changes the style of the div with id="panel" from display:none (hidden)  Not the inline styling you’re thinking of. He’s suggesting the setting of the div to display: inline is overriding the display: none; …which it may be if he’s using a descendant selector with an id to set the display: inline and only an id for the display: none;


make a class .d-none in css and just use document.getElementById('gfxhsub').classList += "d-none" instead of 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>

Places it's tempting to use `display: none;`, but don't, .remember-this-will-NOT-be-read { display: none !important; } apply for college and the form had missing label s so she had no idea what to put in what fields. Now when you preview the page you will not see the Div. In order to show the div we will need to add a Javascript function. We will pass the ID attribute of the Div to the function. Basically this means that we can use this one function to show or hide more than one Div on the same page.


one can use DOM manipulation ...

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

.show(), The callback is not sent any arguments, but this is set to the DOM element being animated. <button>Show it</button>. <p style="display: none">Hello 2</p>. <​script> Each animation starts when the previous sibling div's animation ends. Looking at it in Firebug the jQuery .show() removes the display: none; from the div container. Then the code calls this.show() where 'this' is the vjs object. My expectation is that the vjs show() api will deal all the items it created and show the video. It does not.


Your html shows gfxhsub is the direct parent of mailclose. However in your anonymous function you are removing the parent of the parent of gfxhsub. Instead of using so many parentNodes try

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

Also your question is asking about setting display to none rather than removing a node from the DOM. To do this you might use

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

How to make HTML disappear completely, Not cease to exist completely — just keep things on the down-low. Thankfully, when Let's take an HTML element with the class “ghost” and hide it. //index.​html <div class=”ghost”> <p>I'm friendly!</p></div> //style.css Their default visibility CSS property is visible, but you can flip the script and go: .ghost { Display: none; display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved. The <script> element uses display: none; as default.


How CSS display none affects images on page load, The image is not shown and doesn't occupy any space on the DOM. a script to dynamically change an element of the DOM, will load every element In the code above we set display: none to a div that contains four images Save my name, email, and website in this browser for the next time I comment. Here is the final solution to make sure the DOM tree (all the way up to the body) is not set as display:none; it will continue to parse the parent until it encounters the body. Thus ensuring the returned banner will be displayed.


Text under continue reading button not getting indexed?, Even if you just end up hiding it (display:none) and unhiding it on click. If you can, perhaps go for a pure CSS implementation. https://www.google. Sign in to your Roku account. A Roku account gives you access to an amazing selection of movies, TV shows, music and more from the Roku Channel Store.


Hide or show elements in HTML using display property , Style display property is used to hide and show the content of HTML DOM by accessing the DOM Background-color will set the background color of the div. ASP.NET Forums / General ASP.NET / HTML, CSS and JavaScript / Mantain "display:none" when page postback Mantain "display:none" when page postback [Answered] RSS 3 replies