如何在指定时长后停止显示指定ID的div元素？

现有代码的问题 #

你的代码存在两处关键错误：

1. 无效的DOM操作：done.getElementById.remove("done") 完全错误——done是字符串变量，不是DOM元素，根本没有getElementById方法。
2. 冗余的定时器逻辑：用setInterval循环判断时间属于过度设计，我们只需要在指定延迟后执行一次隐藏/移除操作，用setTimeout更简洁高效。

正确实现方案 #

以下是两种常用的实现方式，根据你的需求选择：

方式1：隐藏元素（可恢复显示）

这种方式只是让元素不可见，DOM结构依然保留，后续可以重新显示：

// 设置提示文本
const doneText = "Done!";
const doneElement = document.getElementById("done");
doneElement.innerHTML = doneText;

// 2秒后隐藏元素
setTimeout(() => {
  doneElement.style.display = "none";
}, 2000);

对应的HTML保持不变：

<h2 style="color:green;" id="greendisp">
  <span id="done"></span>
</h2>

方式2：彻底移除元素

如果不需要保留该元素的DOM结构，可以直接移除：

// 设置提示文本
const doneText = "Done!";
const doneElement = document.getElementById("done");
doneElement.innerHTML = doneText;

// 2秒后移除元素
setTimeout(() => {
  doneElement.remove();
}, 2000);

优化方案：用CSS类控制显示状态

如果需要统一管理隐藏样式，推荐用CSS类代替直接修改行内样式：

/* 定义隐藏类 */
.hidden {
  display: none;
}

const doneText = "Done!";
const doneElement = document.getElementById("done");
doneElement.innerHTML = doneText;

// 2秒后添加隐藏类
setTimeout(() => {
  doneElement.classList.add("hidden");
}, 2000);

内容的提问来源于stack exchange，提问作者My Info