Removing a class name by finding it

Question

I have a menu built on Bootstrap, and I have so far written a code for creating a dropdown menu in jQuery; Here is the HTML and jQuery part

<nav id="main-nav" class="collapse navbar-collapse pull-right" role="navigation">
            <ul id="menu-menu-1" class="nav navbar-nav">
                <li class="active menu-home"><a href="index.html">Home</a>
                </li>
                <li class="dropdown menu-sectors"><a class="dropdown-toggle" href="sectors.html">Sectors</a>
                    <ul class="dropdown-menu">
                        <li class="menu-domestic"><a href="sectors/domestic/index.html">Domestic</a>
                        </li>
                        <li class="menu-industrial"><a href="sectors/industrial/index.html">Industrial</a>
                        </li>
                        <li class="menu-commercial"><a href="sectors/commercial/index.html">Commercial</a>
                        </li>
                        <li class="menu-public-sector"><a href="sectors/public-sector/index.html">Public Sector</a>
                        </li>
                     </ul>
                      </li><li class="dropdown menu-facilities"><a class="dropdown-toggle" href="facilities.html">Facilities</a>
                    <ul class="dropdown-menu">
                        <li class="menu-energy-anlysis"><a href="facilities/energy-anlysis/index.html">Energy Analysis &amp; Reporting</a>
                        </li>
                        <li class="menu-billing-analysis"><a href="facilities/billing-analysis/index.html">Billing Analysis &amp; Procurement</a>
                        </li>
                        <li class="menu-Site-design"><a href="facilities/site-design/index.html">Site Analysis &amp; System Design</a>
                        </li>
                        <li class="menu-software-backup"><a href="facilities/software-backup/index.html">Software &amp; Systems Backup</a>
                        </li>
                        <li class="menu-hardware-controls"><a href="facilities/hardware-controls/index.html">Hardware &amp; Controls</a>
                        </li>
                        <li class="menu-thermography"><a href="facilities/thermography/index.html">Thermography</a>
                        </li>
                        <li class="menu-pat-testing"><a href="facilities/pattesting/index.html">PAT Testing</a>
                        </li>
                    </ul>
                </li><li class="dropdown menu-technologies"><a class="dropdown-toggle" href="technologies/index.html">Technologies</a>
                    <ul class="dropdown-menu">
                        <li class="menu-software-backup"><a href="facilities/software-backup/index.html">Software &amp; Systems Backup</a>
                        </li>
                        <li class="menu-hardware-controls"><a href="facilities/hardware-controls/index.html">Hardware &amp; Controls</a>
                        </li>
                        <li class="menu-r-d"><a href="facilities/r-d/index.html">Research &amp; Development</a>
                        </li>
                    </ul>
                </li><li class="menu-news"><a href="news/index.html">News</a>
                </li>
                <li class="menu-about-us"><a href="about-us/index.html">About Us</a>
                </li>
                <li class="menu-contact-us"><a href="contact-us/index.html">Contact us</a>
                </li>
            </ul>
        </nav>

The JQuery part

    + function ($) {
    "use strict";
    $('.dropdown').on('mouseenter',function() {
        $(this).addClass('open');
        $(this).prev('li.dropdown').removeClass('open');        
        $(this).next('li.dropdown').removeClass('open');        
    });

    $('#menu-menu-1').on('mouseleave', function () {
                //remove the open class here 
       }); 

}(window.jQuery)

I want to remove the open class when i leave the #menu-menu-1 container or hover on the other items, but so far I haven't found a way

The fiddle is here http://jsfiddle.net/7eay9eo0/

Answer 1

Use .removeClass():

$('.open').removeClass('open')