How to allow only one element with a specific class

Question

I have a few div's that onclick fire a function. I want to make it so that when clicked the div that was just clicked has the class .selected . I then want it to be that when you click on another one of the elements, the .selected class is removed from the other element and then applied to the new one. When I click the first one and then click one that comes later it works fine. It is when I click the last one and then one that came before it that it just stays. What am I doing wrong?

 function choosediv(element){ if(document.querySelectorAll('.selected').length != 0){ document.getElementsByClassName('c')[0].classList.remove('selected'); } element.classList.add('selected'); } 

 .c{ background-color: pink; cursor: pointer; } .selected{ background-color: red; } 

 <div class="c" onclick="choosediv(this)">Click me</div> <div class="c" onclick="choosediv(this)">Click me</div> <div class="c" onclick="choosediv(this)">Click me</div> 

Answer 1

The problem is that you are only ever removing the selected class from the 0th element matched in this line:

document.getElementsByClassName('c')[0].classList.remove('selected');

By selecting the 0th element of the array returned by getElementsByClassName('c')[0] , every chosen div not at index 0 will remain selected.

You should perhaps make use of a forEach iteration over the elements selected by getElementsByClassName('c') , to remove the selected class from each one, rather than just the 0th one.

Answer 2

You can just remove the selected class from the .c that is .selected (using querySelector , which returns the first element that matches the query, if it exists, hence the if ), and then add selected class to the element that was clicked:

 .c { background-color: pink; cursor: pointer; } .selected { background-color: red; } 

 <div class="c" onclick="choosediv(this)">Click me</div> <div class="c" onclick="choosediv(this)">Click me</div> <div class="c" onclick="choosediv(this)">Click me</div> <script> function choosediv(element) { var curr_sel = document.querySelector('.c.selected'); if (curr_sel) curr_sel.classList.remove('selected'); element.classList.add('selected'); } </script> 

Answer 3

document.getElementsByClassName('c') - this will select all element that has class c .

you are removing only first element that has class c by selecting collection's element at index 0

document.getElementsByClassName('c')[0]

You should iterate over your collection and remove class one by one.

function choosediv(element){
    if (document.querySelectorAll('.selected').length > 0) {
        document.querySelectorAll('.selected').forEach(el => {
          el.classList.remove('selected');
        })
    }

    element.classList.add('selected');
}

Answer 4

That's an easy one-liner. Just iterate over the collection of c's. When the element equals the one you're currently iterating, add the class, otherwise remove it:

 const cs = document.querySelectorAll('.c'); function choosediv(element) { for (const c of cs) { c.classList[c === element ? 'add' : 'remove']('selected'); } } 

 .c { background-color: pink; cursor: pointer; } .selected { background-color: red; } 

 <div class="c" onclick="choosediv(this)">Click me</div> <div class="c" onclick="choosediv(this)">Click me</div> <div class="c" onclick="choosediv(this)">Click me</div>