如何正确使用Input Range监听器实现动态增减Div数量？

问题根源 #

每次滑动滑块触发input事件时，代码只是持续向容器中添加新Div，没有处理旧的Div，导致数量只增不减，无法匹配当前滑块值对应的网格规模。

方案一：清空后重新生成（简单直接） #

适合不需要保留Div状态的场景，每次滑动时先清空容器内所有旧Div，再根据当前滑块值生成准确数量的新Div：

range.addEventListener('input', (e) => {
  const rangeValue = parseInt(e.target.value);
  const totalDivs = rangeValue * rangeValue;
  
  // 清空容器内所有现有Div
  screen.innerHTML = '';
  
  // 生成对应数量的Div
  for (let i = 0; i < totalDivs; i++) {
    const div = document.createElement('div');
    div.classList.add('screen-divs');
    screen.appendChild(div);
  }
  
  // 设置网格布局（只需执行一次，无需放入循环）
  screen.style.gridTemplateColumns = `repeat(${rangeValue}, auto)`;
  screen.style.gridTemplateRows = `repeat(${rangeValue}, auto)`;
})

方案二：增量调整（保留Div状态） #

如果需要保留现有Div的状态（比如用户设置的颜色、样式），可以计算当前Div数量与目标数量的差值，仅新增或删除多余的Div：

range.addEventListener('input', (e) => {
  const rangeValue = parseInt(e.target.value);
  const totalNeeded = rangeValue * rangeValue;
  const currentDivs = screen.querySelectorAll('.screen-divs');
  const currentCount = currentDivs.length;
  
  // 先设置网格布局
  screen.style.gridTemplateColumns = `repeat(${rangeValue}, auto)`;
  screen.style.gridTemplateRows = `repeat(${rangeValue}, auto)`;
  
  if (totalNeeded > currentCount) {
    // 新增缺失的Div
    for (let i = currentCount; i < totalNeeded; i++) {
      const div = document.createElement('div');
      div.classList.add('screen-divs');
      screen.appendChild(div);
    }
  } else if (totalNeeded < currentCount) {
    // 删除多余的Div（从后往前删避免索引混乱）
    for (let i = currentCount - 1; i >= totalNeeded; i--) {
      currentDivs[i].remove();
    }
  }
})

关键优化点 #

• 把e.target.value转为数字：Input的value默认是字符串，直接相乘可能出现异常，转为整数更安全。
• 移出循环内的网格设置：循环里重复设置网格布局完全没必要，仅需执行一次即可节省性能。

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