how can I add/remove class on children element-CodePudding

See the code below:

.nk-section-icons {
    height: 30px;
    min-width: 30px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: relative;
    background: yellow;
    margin-bottom: 5px;
}

.nk-section-icons .nk-sec-container {
    r
}

.nk-sec-container {
    height: 100%;
    width: 150px;
    background: green;
    position: absolute;
    left: 50px;
    margin: bottom: 10px;
}

.nk-sec-container.addClass {
    background: red;
}

<div >
                <div  data-title="Favorites">
                    <div >

                    </div>
                </div>
                <div  data-title="Recent">
                    <div >
                        
                    </div>
                </div>
                <div  data-title="Notifications">
                    <div >
                        
                    </div>
                </div>
            </div>

const hrdBtn = document.querySelectorAll(".nk-section-icons")
hrdBtn.forEach((hrdBtns)=> {
    hrdBtns.addEventListener("click", (container)=> {
        const btnContainer = container.currentTarget.children[0]

        btnContainer.classList.toggle("addClass")
    })
})

.nk-section-icons {
    height: 30px;
    min-width: 30px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: relative;
    background: yellow;
    margin-bottom: 5px;
}

.nk-section-icons .nk-sec-container {
    r
}

.nk-sec-container {
    height: 100%;
    width: 150px;
    background: green;
    position: absolute;
    left: 50px;
    margin: bottom: 10px;
}

.nk-sec-container.addClass {
    background: red;
}

<div >
                <div  data-title="Favorites">
                    <div >

                    </div>
                </div>
                <div  data-title="Recent">
                    <div >
                        
                    </div>
                </div>
                <div  data-title="Notifications">
                    <div >
                        
                    </div>
                </div>
            </div>

Can anyone help me, Currently my javascript is working it's adding and removing the class addClass? But I need to click the button again to remove the addClass. My goal is I want my code if I click the 2nd button the addClass in my children's first div will remove and it will be transferred to the 2nd button children's div.

CodePudding user response：

const hrdBtn = document.querySelectorAll(".nk-section-icons")
hrdBtn.forEach((hrdBtns)=> {
    hrdBtns.addEventListener("click", (container)=> {
    
        // new code: remove active state on all others
        hrdBtn.forEach(button => button.children[0].classList.remove('addClass'))
        
        const btnContainer = container.currentTarget.children[0]

        btnContainer.classList.toggle("addClass")
    })
})

.nk-section-icons {
    height: 30px;
    min-width: 30px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: relative;
    background: yellow;
    margin-bottom: 5px;
}

.nk-section-icons .nk-sec-container {
    r
}

.nk-sec-container {
    height: 100%;
    width: 150px;
    background: green;
    position: absolute;
    left: 50px;
    margin: bottom: 10px;
}

.nk-sec-container.addClass {
    background: red;
}

<div >
                <div  data-title="Favorites">
                    <div >

                    </div>
                </div>
                <div  data-title="Recent">
                    <div >
                        
                    </div>
                </div>
                <div  data-title="Notifications">
                    <div >
                        
                    </div>
                </div>
            </div>

CodePudding user response：

Because you will only have one element with addClass, you can select the element with document.querySelector(".addClass") and remove the class.

const hrdBtn = document.querySelectorAll(".nk-section-icons")
hrdBtn.forEach((hrdBtns)=> {
  hrdBtns.addEventListener("click", (container)=> {

    document.querySelector(".addClass").classList.remove("addClass");

    const btnContainer = container.currentTarget.children[0];
    btnContainer.classList.toggle("addClass");
  })
})

.nk-section-icons {
  height: 30px;
  min-width: 30px;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  position: relative;
  background: yellow;
  margin-bottom: 5px;
}

/*.nk-section-icons .nk-sec-container {
  r
}*/

.nk-sec-container {
  height: 100%;
  width: 150px;
  background: green;
  position: absolute;
  left: 50px;
  margin: bottom: 10px;
}

.nk-sec-container.addClass {
  background: red;
}

<div >
  <div  data-title="Favorites">
    <div ></div>
  </div>
  <div  data-title="Recent">
    <div ></div>
  </div>
  <div  data-title="Notifications">
    <div ></div>
  </div>
</div>