JavaScript iterate through class elements and select all except clicked element

Question

Let's say I have 5 div elements. All of them with a similar onclick-function, that will "remove" the other divs except 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 this 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 removing every div, but the clicked element should stay. I'm aware that there's a ":not()" selector in jQuery, but I want to do this using JS. Any suggestions?

Thanks

Answer 1

Never use event handler content attributes. Use event listeners and it will work.

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 2

Just pass this inside the hide() in html like hide(this), and catch that as parameter in javascript function. This will pass current clicked DOM object to hide function and you can then use that to show that specific 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 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 quick demonstration of what you want to achieve with some CSS so that 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>