Javascript 删除带有延迟的DIV

这是我的第一个问题，请原谅我没有使用正确的礼仪

我有一个javascript函数，它用渐变隐藏一个div

function fadeOut(cloudChatHide)
{
    "use strict";
    cloudChatHide.onclick = function()
        { 
            if(cloudChatHide.className)
                {
                cloudChatHide.className = '';
                } 
            else 
                {               
                cloudChatHide.className = 'fadeout';
                RemoveCloudChat();
                }
        };
}

但是，此代码不会删除作为RemoveCloudChat函数的DIV。看起来是这样的：-

function RemoveCloudChat()
{
    "use strict";
    cloudChatHide.remove();
    cloudChatHide.className ='fadeout';
}

我真正想做的是在几秒钟后自动淡出div，然后将其删除

我需要从窗口中删除div的原因是它是一个覆盖的div，我需要访问“cloudChatHide”div下面的内容

我不是最伟大的Javascript开发人员，任何帮助/指示都将得到感激

---

谢谢。

如果您可以使用JQuery，它将非常简单，请参见以下内容：

我会在3秒钟内消失
函数衰减（）
{
$（“.fadeout”）.fadeToggle（500，“swing”，function（）{
这个。删除（）；
});
}
无功延迟=3000//3秒
设置超时（衰减、延迟）；

您可以使用CSS转换平滑淡出元素，并在转换完成后侦听transitionend事件以删除元素

看这个

转换是使用以下CSS定义的：

div {
  opacity: 1;
  transition: opacity 1s;
}

div.fade-out {
  opacity: 0;
}

一旦将淡出类添加到div，它将在1秒的时间内平滑地降低其不透明度。这可以通过以下JavaScript实现，无需jQuery：

function fadeOutAndRemove(element) {
    element.classList.add('fade-out');
    element.addEventListener('transitionend', function () {
      element.parentNode.removeChild(element);
    });
}

如果要在固定延迟后自动启动淡出转换，可以在超时后调用淡出删除

window.setTimeout(fadeOutAndRemove.bind(this, elementToHide), 3000)

或者为转换添加延迟

transition: opacity 1s 3s;

并使用淡出类初始化元素

<div class="fade-out"></div>

---

亚历山德罗·马格里奥科拉（Alessandro Maglioccola）的出色成绩

我会在3秒钟内消失
函数衰减（）
{
$（“.fadeout”）.fadeToggle（500，“swing”，function（）{
这个。删除（）；
});
}
无功延迟=3000//3秒
设置超时（衰减、延迟）；

这里有一种不用Jquery的方法。我使用

setTimeout

将不透明度设置为0等待300ms，如果已经隐藏，则执行相反的操作

hideMe=函数（选择器，自身）{
var elem=document.querySelector（选择器）；
if（self.innerHTML==“隐藏”）{
元素类列表。添加（“淡入”）；
setTimeout（函数（）{
元素classList.add（“隐藏”）；
self.innerHTML=“Show”；
}, 300)
}否则{
元素类列表。删除（“隐藏”）；
setTimeout（函数（）{
元素类列表。删除（“褪色”）；
self.innerHTML=“隐藏”；
}, 300)
}
}

正文{
保证金：0；
}
.标题{
高度：100px；
宽度：100%；
背景：钢蓝；
}
#消失{
过渡：所有300ms三次贝塞尔（.25、.8、.25、1）；
}
红场先生{
宽度：100%；
身高：225px；
背景：番茄；
不透明度：1；
}
.隐藏{
高度：0px；
宽度：0px；
}
.褪色{
不透明度：0；
}
钮扣{
宽度：100%；
高度：25px；
边界：0px；
大纲：无；
光标：指针；
}

隐藏

你能发布你的html吗？也许可以引导你进入正确的方向。嗨，谢谢你，TBH我真的不明白那里写的是什么。嗨，谢谢你的回答，不过我希望在一段时间后删除DIV，但不要点击它。我的原始代码按原样处理淡入淡出，我想要的是1。DIV加载，2。延迟5000秒后，DIV消失3。然后删除div，这一切必须在用户不单击或任何其他交互的情况下发生。谢谢你能在页面加载时延迟一段时间后删除div吗？是的，页面加载后，div会在延迟消失后出现，然后被删除，这就是我需要的。谢谢我修正了我的否决票，很抱歉，我不是故意这么做的-我是新来的。使用jQuery只是为了淡化一个元素有点夸张。我认为这是可以接受的答案。解释得很好，不需要jquery。