如何在纯 Javascript 中删除和隐藏 HTML 元素？答案

【问题标题】：How do you remove and hide HTML elements in plain Javascript?如何在纯 Javascript 中删除和隐藏 HTML 元素？
【发布时间】：2011-11-19 11:49:25
【问题描述】：

我有这个 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">，但由于某种原因它无法正常工作。知道为什么吗？我在页面加载后加载脚本，所以这不是问题。

【问题讨论】：

你为什么不隐藏验证？就像这样：document.getElementById("content-container").verifying.style.display = "none";

标签： javascript html show-hide removechild

【解决方案1】：

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

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

你也可以隐藏它：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

要删除，您可以使用（如上所述）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";

【讨论】：