I'm in the process of creating a web app that tracks real estate transactions. Part of that process is to track all the offers that come in on a specific property. An overview of the offers are displayed at first glance vertically on the page. When you click on an offer a control panel drops so that further info and/or actions can be viewed/taken. The code to drop the control panel is working and I've also got it so that if you click on another offer it closes any open control panels.

I've also included a div that I've given the class name of "close-bttn". This button is located within the main control-panel and is supposed to close the control-panel that it is a child of.

The close-bttn is supposed to close the open control panel, but it does not.

Here's a code shot of the structure

           <div >
               <div id="offer-amount"># dollarformat( offer_amount )#</div>
               <div id="buyer-premium"># dollarFormat( buyer_premium )#</div>
               <div id="buyer-name"># buyer_name #</div>
               <div id="agent-name"># agent #</div>
               <div id="agent-email"># agent_email #</div>  
               <div >
                  <div >X</div> 

               </div>   

            </div>

Here is the code that I'm using to manipulate the elements

     const eachOffer = document.querySelectorAll(".each-offer");
    const controlPanels = document.querySelectorAll(".control-panel");

    // This adds a click event to the <div > element that opens the control-panel div
    // by adding the class "scaley".  The scaley class definition: .scaley{transform: scaleY(1)}

    eachOffer.forEach((offer)=>{
        
       // This. targets the specific control-panel for the offer
        var o = offer.querySelector(".control-panel");

        offer.addEventListener('click', ()=>{

            // See function for explanation
            // This closes any open control-panels
            toggleControlPanel()

            o.classList.toggle("scaley")

        })

    })

    function toggleControlPanel(){

    //There are multiple control-panels, one for each offer. This loops over all the control-panels
    // on the page and if the classList contains "scaley" it is removed which closes the ocntrol-panel  

        document.querySelectorAll(".control-panel").forEach((o)=>{
            if( o.classList.contains("scaley") ) o.classList.toggle("scaley")
        });

    }//END

Here's the code to add the click event to use the close-bttn to close the control-panel

    controlPanels.forEach((panel)=>{

        panel.querySelector(".close-bttn").addEventListener("click",()=>{
            //This does not seem to be working.  
            // I've tried to use classList.toggle as well with no result

            panel.classList.remove("scaley")

        })
    })

Not sure what to do here. Any ideas??

In addition I've used

    classList.toggle 
    classList.remove
    classList.value
    //ClassList.value contains all the classes an element has
    //So the control-panel has a classList.value="control-panel scaley" at onset
    //I tried to do classList.value="control-panel".  that didn't work.

Here is a link to a codepn example that I posted: https://codepen.io/Hugh-Rainey/pen/wvxjgpJ?editors=1111

CodePudding user response：

Your remove() function is working, only problem is your click event is bubbling up and triggering the handler on your offer divs (which re-toggles them back open). You need to stop the event from bubbling up.

    controlPanels.forEach((panel)=>{

        panel.querySelector(".close-bttn").addEventListener("click",(e)=>{
            e.stopPropagation(); // stop event bubbling, don't forget to add e to your param list

            panel.classList.remove("scaley")

        })
    })

CodePudding user response：

querySelectorAll returns a NodeListOf which is not an array. So use a for loop like this:

for (let i = 0; i < controlPanels.length; i  ) {
  
    panel.querySelector(".close-bttn").addEventListener("click",()=>{
        panel.classList.remove("scaley")
    })

}