移除宽度<5000的div及点击显示适配元素的JS实现问题求助

现有3个菜单，每个元素的div尺寸不同，宽度可由用户设置，默认值为width="5000"。需求如下：

• 自动隐藏宽度小于5000的div；
• 点击元素时，显示其余能适配剩余总宽度的元素。

尝试用forEach结合addEventListener(click)实现时，元素被直接移除；另一种forEach尝试下，元素要么全部显示要么全部删除，求解决办法。

附代码示例：

window.appState['width']=5000;

var div_array = Array.prototype.slice.call(document.querySelectorAll("#spaceBlock1"));

var div_array_button_1 = Array.prototype.slice.call(button_1);
var div_array_button_2 = Array.prototype.slice.call(button_2);
var div_array_button_3 = Array.prototype.slice.call(button_3);
var div_array_button_4 = Array.prototype.slice.call(button_4);
var div_array_button_5 = Array.prototype.slice.call(button_5);
var div_array_button_6 = Array.prototype.slice.call(button_6);

console.log(document.querySelectorAll("#spaceBlock1"));


div_array.forEach(function() {
  if (div_array > (window.appState['width'] = 5000)){
    div_array.remove()
  }
});

<div style="display: none;">
  <div id="sectionsListFront">
    <div class="uiSpaceText">Front sections</div>
    <div class="sectionButton" id="sectionButton0" onclick="spaceOpenUI(0); spaceOpenUIdiv(0);">1</div>
    <div class="sectionButton" id="sectionButton1" onclick="spaceOpenUI(1); spaceOpenUIdiv(1);">2</div>
    <div class="sectionButton" id="sectionButton2" onclick="spaceOpenUI(2); spaceOpenUIdiv(2);">3</div>
    <div class="sectionButton" id="sectionButton3" onclick="spaceOpenUI(3); spaceOpenUIdiv(3);">4</div>
    <div class="sectionButton" id="sectionButton4" onclick="spaceOpenUI(4); spaceOpenUIdiv(4);">5</div>
    <div class="sectionButton" id="sectionButton5" onclick="spaceOpenUI(5); spaceOpenUIdiv(5);">6</div>
    <div class="sectionButton" id="sectionButton6" onclick="spaceOpenUI(6); spaceOpenUIdiv(6);">7</div>
  </div>

  <div id="sectionsListBack">
    <div class="uiSpaceText">Back sections</div>
    <div class="sectionButton" id="sectionButton7" onclick="spaceOpenUI(7); spaceOpenUIdiv(7);">1</div>
    <div class="sectionButton" id="sectionButton8" onclick="spaceOpenUI(8); spaceOpenUIdiv(8);">2</div>
    <div class="sectionButton" id="sectionButton9" onclick="spaceOpenUI(9); spaceOpenUIdiv(9);">3</div>
    <div class="sectionButton" id="sectionButton10" onclick="spaceOpenUI(10); spaceOpenUIdiv(10);">4</div>
    <div class="sectionButton" id="sectionButton11" onclick="spaceOpenUI(11); spaceOpenUIdiv(11);">5</div>
    <div class="sectionButton" id="sectionButton12" onclick="spaceOpenUI(12); spaceOpenUIdiv(12);">6</div>
    <div class="sectionButton" id="sectionButton13" onclick="spaceOpenUI(13); spaceOpenUIdiv(13);">7</div>
  </div>

  <div id="sectionsListLeft">
    <div class="uiSpaceText">Left sections</div>
    <div class="sectionButton" id="sectionButton14" onclick="spaceOpenUI(14); spaceOpenUIdiv(14);">1</div>
    <div class="sectionButton" id="sectionButton15" onclick="spaceOpenUI(15); spaceOpenUIdiv(15);">2</div>
  </div>

  <div id="sectionsListRight" style="margin-bottom: 20px;">
    <div class="uiSpaceText">Right sections</div>
    <div class="sectionButton" id="sectionButton16" onclick="spaceOpenUI(16); spaceOpenUIdiv(16);">1</div>
    <div class="sectionButton" id="sectionButton17" onclick="spaceOpenUI(17); spaceOpenUIdiv(17);">2</div>
  </div>
</div>
</div>

先修正初始过滤逻辑 #

你原来的JS代码有几个致命问题：

1. forEach回调没接收当前元素，直接拿数组div_array做比较完全错误；
2. 错误地在判断条件里给window.appState['width']赋值，应该是读取值做比较；
3. 直接调用div_array.remove()无效，因为div_array是数组不是DOM元素；而且直接移除元素会导致无法恢复，应该用隐藏/显示的方式（修改style.display）。

初始过滤的正确代码：

// 初始化默认宽度
window.appState = { width: 5000 };
// 获取目标元素集合，若实际要处理的是.sectionButton，把选择器改成这个
const divArray = Array.from(document.querySelectorAll("#spaceBlock1"));

// 初始过滤：隐藏宽度小于设定值的元素
divArray.forEach(div => {
  // 获取元素宽度：优先取自定义width属性，没有则取渲染后的实际宽度
  const divWidth = parseInt(div.getAttribute('width'), 10) || div.offsetWidth;
  if (divWidth < window.appState.width) {
    div.style.display = 'none'; // 隐藏而非移除，方便后续恢复
  } else {
    div.style.display = 'block'; // 确保符合条件的元素显示
  }
});

点击事件逻辑实现 #

点击元素时，计算剩余可用宽度，然后显示所有宽度不超过剩余值的其他元素：

// 给每个元素绑定点击事件
divArray.forEach(div => {
  div.addEventListener('click', function() {
    // 获取当前点击元素的宽度
    const currentWidth = parseInt(this.getAttribute('width'), 10) || this.offsetWidth;
    // 计算剩余可用宽度
    const remainingWidth = window.appState.width - currentWidth;

    // 遍历所有元素，控制显示/隐藏
    divArray.forEach(item => {
      if (item === this) return; // 跳过当前点击的元素
      const itemWidth = parseInt(item.getAttribute('width'), 10) || item.offsetWidth;
      // 判断当前元素是否能适配剩余宽度
      item.style.display = itemWidth <= remainingWidth ? 'block' : 'none';
    });
  });
});

额外提示 #

• 如果你的目标元素是HTML里的.sectionButton，把选择器从#spaceBlock1改成.sectionButton即可；
• 若需要计算多个元素总宽度适配剩余空间，可先把元素按宽度从小到大排序，再累加宽度直到接近剩余值，只显示这些元素；
• 永远不要直接移除DOM元素来实现显示/隐藏，用CSS控制display属性，能保留元素的交互能力。

内容的提问来源于stack exchange，提问作者Алексей Мажула