如何在子元素上添加/删除 class

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

<div class="nk-section-l-icons">
                <div class="nk-section-icons fav" data-title="Favorites">
                    <div class="nk-sec-container nk-sec-fav-c">

                    </div>
                </div>
                <div class="nk-section-icons recent" data-title="Recent">
                    <div class="nk-sec-container nk-sec-recent-c">
                        
                    </div>
                </div>
                <div class="nk-section-icons notifs" data-title="Notifications">
                    <div class="nk-sec-container nk-sec-notif-c">
                        
                    </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 class="nk-section-l-icons"> <div class="nk-section-icons fav" data-title="Favorites"> <div class="nk-sec-container nk-sec-fav-c addClass"> </div> </div> <div class="nk-section-icons recent" data-title="Recent"> <div class="nk-sec-container nk-sec-recent-c"> </div> </div> <div class="nk-section-icons notifs" data-title="Notifications"> <div class="nk-sec-container nk-sec-notif-c"> </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.

Answer 1

 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 class="nk-section-l-icons"> <div class="nk-section-icons fav" data-title="Favorites"> <div class="nk-sec-container nk-sec-fav-c addClass"> </div> </div> <div class="nk-section-icons recent" data-title="Recent"> <div class="nk-sec-container nk-sec-recent-c"> </div> </div> <div class="nk-section-icons notifs" data-title="Notifications"> <div class="nk-sec-container nk-sec-notif-c"> </div> </div> </div>

Answer 2

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 class="nk-section-l-icons"> <div class="nk-section-icons fav" data-title="Favorites"> <div class="nk-sec-container nk-sec-fav-c addClass"></div> </div> <div class="nk-section-icons recent" data-title="Recent"> <div class="nk-sec-container nk-sec-recent-c"></div> </div> <div class="nk-section-icons notifs" data-title="Notifications"> <div class="nk-sec-container nk-sec-notif-c"></div> </div> </div>