CODEWITHSUNDEEP
javascripthtmlcss
Fred
Fred

Reputation: 397

JavaScript iterate through class elements and select all except clicked element

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

Upvotes: 5

Views: 11126

Answers (4)

dimlucas
dimlucas

Reputation: 5131

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>

Upvotes: 1

Furqan Aziz
Furqan Aziz

Reputation: 1104

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";
        }
    }
}

Upvotes: 3

Deep 3015
Deep 3015

Reputation: 10075

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>

Upvotes: 1

Oriol
Oriol

Reputation: 288230

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>

Upvotes: 6

Related Questions