如何在setTimeout()执行完成后移除元素背景？

问题原因 #

你当前的代码只是把元素的innerHTML设为空，清空了文本内容，但元素本身的DOM节点还存在。因为你给元素设置了固定width、padding这些样式，元素的盒子不会因为内容为空而收缩消失，所以背景色会残留。而没设置这些属性时，元素是收缩包裹内容的，内容空了元素就没有尺寸，看起来就完全消失了。

解决方案 #

下面提供几种实用的解决方式，根据你的需求选择：

1. 直接隐藏元素（最简单，适合一次性使用）

如果这个提示框用完就不需要再显示，直接设置display: none让元素从页面中消失：

const msg = "Welcome";
const alarmMsg = document.getElementById("alarmmsg");
alarmMsg.innerHTML = msg;

setTimeout(function(){
  alarmMsg.style.display = 'none';
}, 4000);

2. 让元素随内容收缩（适合需要复用元素的场景）

如果之后还要再次显示这个提示框，不想移除元素，可以通过修改样式让元素在内容为空时收缩：

方法一：通过JS动态修改样式

const msg = "Welcome";
const alarmMsg = document.getElementById("alarmmsg");
alarmMsg.innerHTML = msg;

setTimeout(function(){
  alarmMsg.innerHTML = '';
  // 内容为空时设置高度为0，overflow:hidden避免padding撑开高度
  alarmMsg.style.height = '0';
  alarmMsg.style.overflow = 'hidden';
  // 后续要恢复内容时，记得把height改回auto，overflow改回visible
}, 4000);

方法二：用CSS类控制状态（更易维护）
先修改CSS，添加空内容时的样式：

.Javascript-Message-disappears-1{
    width: fit-content; /* 宽度自适应内容 */
    height: auto;
    background-color: crimson;
    text-align: center;
    position: absolute;
    top: calc(100vh - 70px);
    padding: 20px;
    box-sizing: border-box;
    transition: all 0.3s; /* 添加入场/退场过渡动画 */
}

/* 内容为空时的样式 */
.Javascript-Message-disappears-1.empty{
    padding: 0;
    height: 0;
}

然后在JS里添加/移除类：

const msg = "Welcome";
const alarmMsg = document.getElementById("alarmmsg");
alarmMsg.innerHTML = msg;

setTimeout(function(){
  alarmMsg.innerHTML = '';
  alarmMsg.classList.add('empty');
}, 4000);

// 若之后要恢复显示，执行以下代码：
// alarmMsg.innerHTML = "新内容";
// alarmMsg.classList.remove('empty');

3. 移除DOM节点（彻底删除，适合不再复用的场景）

如果确定之后不会再用到这个元素，可以直接从DOM中移除它：

const msg = "Welcome";
const alarmMsg = document.getElementById("alarmmsg");
alarmMsg.innerHTML = msg;

setTimeout(function(){
  alarmMsg.remove();
}, 4000);

内容的提问来源于stack exchange，提问作者Atman Atos