How do you remove and hide HTML elements in plain Javascript?
10,293
Solution 1
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";
Solution 2
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);
Solution 3
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";
Author by
chromedude
Updated on June 28, 2022Comments
-
chromedude almost 2 years
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.