如何在普通Javascript中删除和隐藏HTML元素?

时间:2011-09-17 23:52:22

标签: javascript html show-hide removechild

我有这个HTML:

<body>
    <div id="content-container" style="display:none">
         <div>John</div>
    </div>
    <div id="verifying">
         <div id="message">Verified</div>
    </div>
</body>

这个Javascript:

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

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

我尝试删除<div id="verifying">并在5秒后显示<div id="content-container">,但由于某种原因它无效。知道为什么吗?我在页面加载后加载脚本,这不是问题。

3 个答案:

答案 0 :(得分:8)

您需要将元素引用传递给removeChild,而不是字符串:

body.removeChild(document.getElementById('verifying'));

你也可以隐藏它:

document.getElementById('verifying').style.display = "none";

答案 1 :(得分:2)

你的removeChild需要获取一个元素,而不是一个字符串

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

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

答案 2 :(得分:1)

删除你可以使用(如上所述)removeChild:

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

隐藏元素:

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

编辑:

哦,如果你想让它隐藏但没有被“流出”,请使用:

var x = document.getElementById('elementid');
x.style.visibility="hidden";