JavaScript iterates over the elements of the class and selects everything except the element with a click

Question

Let's say I have 5 div elements. They all have a similar onclick function that will “delete” other divs except for the clicked div.

HTML:

<div id="1" class="divs" onclick="hide()"></div>
<div id="2" class="divs" onclick="hide()"></div>
<div id="3" class="divs" onclick="hide()"></div>
<div id="4" class="divs" onclick="hide()"></div>
<div id="5" class="divs" onclick="hide()"></div>

So here is what I tried:

JavaScript:

function hide(){
    var divs = document.getElementsByClassName("divs");
    for(var i = 0; i < arrows.length; i++){
        if(this != arrows[i]){
            arrows[i].style.display = "none";
        }
    }
}

All this does is remove each div, but the element with the click should remain. I know there is a ": not ()" selector in jQuery, but I want to do this using JS. Any suggestions?

thank

Answer 1

this hide() html, hide(this), javascript. DOM hide, , div.

HTML:

<div id="1" class="divs" onclick="hide(this)"></div>
<div id="2" class="divs" onclick="hide(this)"></div>
<div id="3" class="divs" onclick="hide(this)"></div>
<div id="4" class="divs" onclick="hide(this)"></div>
<div id="5" class="divs" onclick="hide(this)"></div>

JavaScript:

function hide(obj){
    var arrows = document.getElementsByClassName("divs");
    for(var i = 0; i < arrows.length; i++){
        if(obj != arrows[i]){
            arrows[i].style.display = "none";
        }
    }
}

Answer 2

. , .

var divs = document.getElementsByClassName("divs");
function hide() {
  for(var i = 0; i < divs.length; i++){
    if(this != divs[i]){
      divs[i].style.display = "none";
    }
  }
}
[].forEach.call(divs, function(div) {
  div.addEventListener('click', hide);
});

<div id="1" class="divs">1</div>
<div id="2" class="divs">2</div>
<div id="3" class="divs">3</div>
<div id="4" class="divs">4</div>
<div id="5" class="divs">5</div>

Answer 3

It can be done as

HTML

<div id="1" class="divs" onclick="hide(this)">q</div>
<div id="2" class="divs" onclick="hide(this)">w</div>
<div id="3" class="divs" onclick="hide(this)">e</div>
<div id="4" class="divs" onclick="hide(this)">r</div>
<div id="5" class="divs" onclick="hide(this)">7</div>

Js

<script>
function hide(obj){
    var arrows = document.getElementsByClassName("divs");
    for(var i = 0; i < arrows.length; i++){
        if(obj != arrows[i]){
            arrows[i].style.display = "none";
        }
    }
}
</script>

Answer 4

Here's a brief demonstration of what you want to achieve with some CSS so you can see the effect:

window.onload = () => {
 
  var divs = document.getElementsByClassName('divs');

  for(let div of divs) {
  	  div.onclick = (e) => {
     		for(let visibleDiv of divs) {
              if(visibleDiv != e.target) {
              	visibleDiv.style.display = "none";
              }
          }
      }
  }
  
}

.container {
    display: flex;
    justify-content: space-between;
}

.divs {
    width: 50px;
    height: 50px;
    background-color: #e67e22
}

<div class="container">    
    <div id="1" class="divs"></div>
    <div id="2" class="divs"></div>
    <div id="3" class="divs"></div>
    <div id="4" class="divs"></div>
    <div id="5" class="divs"></div>
</div>

Run code