容器右边界超父元素左边界时，remove()批量删除而非逐个删除的问题

问题描述 #

当.container元素的右边界x坐标小于等于其父元素.division的左边界x坐标时，尝试使用remove()方法逐个移除对应元素，却出现一次性移除所有.container元素的情况；而使用visibility: hidden时，能正常实现逐个隐藏的效果。

原因分析 #

1. .division采用flex布局，当一个.container被移除后，剩余的.container会自动向左重新排列，导致它们的位置突然满足“右边界≤父元素左边界”的条件，在同一个定时器周期内被全部移除。
2. visibility: hidden仅隐藏元素，不会从DOM中移除，因此不会改变布局，元素会按照动画进度逐个到达边界并隐藏。

解决方案 #

修改定时器内的逻辑，每次只查找并移除第一个符合条件的元素，避免布局突变导致所有元素被一次性移除。代码如下：

let isPassed = setInterval(function() {
  let containers = document.querySelectorAll(".container");
  let division = document.querySelector(".division");
  // 找到第一个符合移除条件的元素
  const targetContainer = Array.from(containers).find(container => {
    const containerRight = container.getBoundingClientRect().right;
    const zoneLeft = division.getBoundingClientRect().left;
    return containerRight <= zoneLeft;
  });
  if (targetContainer) {
    targetContainer.remove();
    // 可选：当所有元素都被移除后清除定时器
    if (document.querySelectorAll(".container").length === 0) {
      clearInterval(isPassed);
    }
  }
}, 100);

完整代码示例 #

HTML #

<div class="division">
  <div class="container A">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
  <div class="container A">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
  <div class="container A">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
  <div class="container A">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
  <div class="container A">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</div>

CSS #

body,
html {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.division {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 320px;
  height: 128px;
  border: 1px solid red;
  /* overflow: hidden; */
}

.container {
  display: flex;
  flex-direction: column;
  position: relative;
  bottom: 0;
  height: 128px;
  width: 64px;
  display: flex;
  align-items: center;
  visibility: visible;
  animation: translation 5s linear;
  border: 1px solid rgb(0, 0, 0);
}

.container>div {
  display: flex;
  position: relative;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid black;
}

@keyframes translation {
  0% {
    right: 64px;
  }
  100% {
    right: 896px;
  }
}

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