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.re开发者_JAVA百科moveChild('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.
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";
加载中,请稍侯......
精彩评论