automatically remove divs that are smaller in width than width=5000

Question

we have 3 menus, the div of each element is different in size. and the width is also set by the user, by default it is width="5000" , the task is that when you click on the element, it will display the rest of those elements that can fit in our total width.

I tried with forEach via addEventListener (click) , the elements are simply removed. I tried through forEach, Element either open everything or delete everything.

https://i.stack.imgur.com/POjoj.png https://i.stack.imgur.com/Ks4NE.png https://i.stack.imgur.com/hfMaU.png

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>

enter image description here

Answer 1

Have you tried targeting the divs with:

[element].style.width < 5000

The element in this case is the element you want to target.