How do you remove and hide HTML elements in plain Javascript?

javascript html show-hide removechild
chromedude picture chromedude · Sep 18, 2011 · Viewed 9.4k times · Source

I have this HTML:

<body>
    <div id="content-container" style="display:none">
         <div>John</div>
    </div>
    <div id="verifying">
         <div id="message">Verified</div>
    </div>
</body>

And this Javascript:

var body = document.body;
var signup = document.getElementById("content-container");

setTimeout(function(){
    body.removeChild('verifying');
    signup.style.display = "block";
}, 5000);

I am trying to remove <div id="verifying"> and show <div id="content-container"> after 5 seconds, but for some reason it is not working. Any idea why? I am loading the script after the page loads so that is not the problem.

Answer

Digital Plane picture Digital Plane · Sep 18, 2011

You need to pass an element reference to removeChild, not a string:

body.removeChild(document.getElementById('verifying'));

You could also just hide it:

document.getElementById('verifying').style.display = "none";

Related questions

Difference between jQuery’s .hide() and setting CSS to display: none

Which am I better off doing? .hide() is quicker than writing out .css("display", "none"), but what’s the difference and what are both of them actually doing to the HTML element?

Read More
How to set "style=display:none;" using jQuery's attr method?

Following is the form with id msform that I want to apply style="display:none" attribute to. <form id="msform" style="display:none;"> </form> Also the check should be performed before adding the "style=display:none;" …

Read More
How to Toggle a div's visibility by using a button click

Below is my javascript code which i used to show a div when clicked on a button. How can I hide it when clicked again? And then on clicking it, div should be visible again? <script type="text/javascript"&…

Read More