Change style of the div by mouse click and by second click change it back

Question

I have prepared jsFiddle where I want to change background of the div "Child X" by mouse click and if it was clicked again on the already selected div then change the style back to original.

Right now there is a bug when the page just loaded, by the very first click on the child div nothing happens, only if I click second time then the color will be changed. Why ?

P.S. The other functionality should stay as it is, like clicking on the different div, the previous selected div should be unselected

$(".childDiv").click(function () {
    const x = document.getElementsByClassName("childDiv");
    for (let i = 0; i < x.length; i++) {
        x[i].addEventListener("click", function(){
            const selectedEl = document.querySelector(".childDivSelected");
            if(selectedEl){
                selectedEl.classList.remove("childDivSelected");
            }
            this.classList.add("childDivSelected");
        }, false);
    }
})

.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
  margin:5px;  
    display:relative;
}


.childDiv{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}

.childDivSelected{
background-color: #ff0000;
}

    
    
    

    
    Group 1
    
        Child 1
    
    
        Child 2
    


    Group 2
    
        Child 1
    
    
        Child 2

View on jsFiddle

user_896358 · Answer

You can just add a CSS class and then use .toggle() to switch on/off the class for the selected element, to remove the class form the group elements and exclude the current clicked item you can use .not() and .remove():

$(this).parent().find('.childDiv').not(this).removeClass('selected');

Here is a working snippet or a fiddle:

$('.childDiv').click(function(){
  $(this).parent().find('.childDiv').not(this).removeClass('selected');
  $(this).toggleClass('selected');
});

.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
  margin:5px;  
    display:relative;
}


.childDiv{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}

.selected {
  background-color: #ff0000;
}



    Group 1
    
        Child 1
    
    
        Child 2
    


    Group 2
    
        Child 1
    
    
        Child 2

in case you want to de-select all elements in the page, you can just remove .parent().find() and it will work for all elements:

$('.childDiv').click(function(){
  $('.childDiv').not(this).removeClass('selected');
  $(this).toggleClass('selected');
});

.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
  margin:5px;  
    display:relative;
}


.childDiv{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}

.selected {
  background-color: #ff0000;
}



    Group 1
    
        Child 1
    
    
        Child 2
    


    Group 2
    
        Child 1
    
    
        Child 2

Change style of the div by mouse click and by second click change it back

1 Answers