how can I add/remove class on children element

Question

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

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

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.

userP067 · Answer

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

Cédric · Answer

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

how can I add/remove class on children element

2 Answers