Javascript 淡出效果完成后如何运行.remove（）？

我想在“this.parentElement.classList.add（“淡出”）；”行完成后（淡出持续1秒）运行“this.parentElement.remove（）；”

立即运行.remove（），因此不会显示淡出效果

非常感谢

var deleteItem = document.querySelectorAll("span");

for (var i = 0; i < deleteItem.length; i++) {
  deleteItem[i].addEventListener("click", function(event){
    this.parentElement.classList.add("fade-out");
    this.parentElement.remove();
    event.stopPropagation();
  });
}

var deleteItem=document.querySelectorAll（“span”）；
对于（变量i=0；i

指定淡入淡出超时函数的持续时间，完成后将执行回调函数

代码示例

const deleteItem=document.queryselectoral（“span”）；
常数衰减时间=2000；
for（设i=0；ithis.remove（），淡出时间）
});
}

。光标指针{
光标：指针；
}

首先
第二
第三种方法是监听事件的
转换和
事件（）

这种方法相对于监听超时的吸引力意味着您不必在JavaScript中硬编码转换持续时间（如果您更改它，您必须同时更新CSS和JavaScript）。事件将在结束时触发，不管需要多长时间。
假设
。淡出
触发动画，您可以向元素添加
animationend
，以实现此功能。。。在任何动画结束后调用回调

var deleteItem = document.querySelectorAll("span");

for (var i = 0; i < deleteItem.length; i++) {
    deleteItem[i].addEventListener("click", function(event) {
        this.parentElement.addEventListener("animationend", function() {
            this.parentElement.remove();
        });

        this.parentElement.classList.add("fade-out");
        event.stopPropagation();
    });
}

var deleteItem=document.querySelectorAll（“span”）；
对于（变量i=0；i
我建议添加一个。例如，
淡出
的CSS是什么？标记是什么样子的？您可以创建一个。感谢您的澄清，欢迎来到SO。看看Thank you Utkanos，我希望得到一个没有超时的解决方案，正是因为这个原因，只有这段代码对我不起作用。Eugene Sunic的解决方案确实有效，但正如您所提到的，我必须硬编码转换持续时间。谢谢Kwame，但不幸的是，代码与错误代码“deleteItem[I]。事件不是函数”不起作用。对不起……它应该是
addEventListener
而不是
事件
。谢谢Kwame，我这里的问题是，只有淡出动画运行，但该项目实际上并没有删除后。谢谢尤金苏尼克，这是完美的工作！你知道有没有可能在没有设置超时的情况下得到相同的结果，这样我就不必硬编码淡出持续时间了？
var deleteItem = document.querySelectorAll("span");

for (var i = 0; i < deleteItem.length; i++) {
    deleteItem[i].addEventListener("click", function(event) {
        this.parentElement.addEventListener("animationend", function() {
            this.parentElement.remove();
        });

        this.parentElement.classList.add("fade-out");
        event.stopPropagation();
    });
}