如何在文本切换时删除父div中通过insertAdjacentHTML插入的clock子div

你的原有代码存在两处核心逻辑错误：

• 插入元素的判断逻辑错误：你判断的是.message容器本身是否有clock类，但clock是你要插入的子元素的类，这个判断永远成立，会导致多次切换后重复插入多个计时元素
• 删除逻辑错误：div.parentNode.removeChild(div.firstChild)操作的是.message容器的父节点，会误删其他元素，也没有精准定位到要删除的clock子元素

修改后的完整代码如下：

[...document.querySelectorAll('.message')].forEach(div => {
  // 先查找当前容器内的clock子元素
  const clockEl = div.querySelector('.clock');
  if (div.textContent.includes("Hello")) {
    // 只有不存在clock元素时才插入
    if (!clockEl) {
      div.insertAdjacentHTML('beforeend', `<div class="clock" data-sec="0">00:00</div>`);
    }
  } else {
    // 存在clock元素时才删除
    if (clockEl) {
      clockEl.remove();
    }
  }
});

上述修改做了两处优化：

1. 每次遍历先查找当前.message容器内的.clock元素，复用这个查询结果避免重复DOM查询
2. 插入前判断子元素是否存在，防止重复插入；删除前判断子元素是否存在，避免调用删除方法时报错

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