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

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.

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

Share Improve this question asked Sep 17, 2011 at 23:52 chromedude 4,30216 gold badges69 silver badges96 bronze badges

why dont you hide verifying?? so something like : document.getElementById("content-container").verifying.style.display = "none"; – ahoura Commented Sep 17, 2011 at 23:54

Add a comment |

3 Answers 3

Sorted by: Reset to default 12

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

3 Answers 3

与本文相关的文章

评论列表(0)