How do you remove and hide HTML elements in plain Javascript?
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.
3 answers
solution1
8 ACCPTED 2011-09-17 23:54:40
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";
solution2
2 2011-09-17 23:55:51
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);
solution3
1 2011-09-17 23:57:36
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";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.