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

StackOverflow https://stackoverflow.com/questions/7458619

Question

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.

Was it helpful?

Solution

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

OTHER TIPS

your removeChild needs to get an element, not a string

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

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

to remove you can use (as stated) removeChild:

var x = document.getElementById('elementid');
x.parentNode.removeChild(x);

And to hide an element:

var x = document.getElementById('elementid');
x.style.display="none";

EDIT:

oh and if you want it hidden but not taken "out of flow", use this:

var x = document.getElementById('elementid');
x.style.visibility="hidden";
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top