Web聊天机器人跳动打字指示器显示异常与删除失效问题

问题1：圆点显示异常（非正圆、内部有黑点） #

两个核心错误导致该现象：

• 黑点来源：三个圆点的<span>标签内写入了文本字符.，默认黑色文本没有被隐藏，直接显示在紫色背景上方，就是你看到的内部黑点。
• 非正圆原因：<span>默认是行内元素，行内元素设置width、height属性不生效，你写的12px宽高没有实际作用，元素尺寸由内部的.文本撑开，形状不规则，即使设置border-radius: 50%也无法生成正圆形。

修复代码 #

首先修改HTML，去掉三个圆点标签内的.文本，抽离公共类减少重复代码：

<div class="my message">
  <span class="jumping-dots">
    <span class="dot dot-1"></span>
    <span class="dot dot-2"></span>
    <span class="dot dot-3"></span>
  </span>
</div>

然后优化CSS，给圆点添加行内块属性让宽高生效：

.jumping-dots .dot {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  border-radius: 50%;
  background-color: #ED49FE;
  animation: jump 1s infinite;
}
.jumping-dots .dot-1 {
  animation-delay: 200ms;
}
.jumping-dots .dot-2 {
  animation-delay: 400ms;
}
.jumping-dots .dot-3 {
  animation-delay: 600ms;
  margin-right: 0; /* 最后一个圆点移除多余右边距 */
}

@keyframes jump {
  0%   {bottom: 0px;}
  20%  {bottom: 5px;}
  40%  {bottom: 0px;}
}

问题2：JS删除元素后有残留 #

核心原因是document.querySelector()只会返回匹配选择器的第一个DOM元素。如果你的输入状态监听逻辑被多次触发（比如用户反复输入、网络波动导致状态回调重复执行），页面上会插入多个class为jumping-dots的元素，原有代码只会删除第一个，剩余元素留在页面上就会形成残留。

修复代码 #

遍历所有匹配的跳动圆点元素全部删除即可，推荐用更简洁的原生remove()方法代替父节点删除逻辑：

// 查找页面上所有跳动圆点元素
const allDots = document.querySelectorAll(".jumping-dots");
allDots.forEach(dotEl => {
  dotEl.remove();
});

如果需要从根源避免重复插入问题，可以在每次插入新的跳动圆点前，先执行一遍上述删除逻辑，保证页面上同一时间最多只有一个输入状态提示。

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