I was a web developer in the 90's but am now a high school Social Studies teacher - so my skills are pretty rusty.  I'm trying to help out the school with their Canvas (Instructure LMS) implementation.

I'm trying to completely remove the second column called "Managed Accounts" from the "Courses" drop-down navigation menu.  We have to do this from a JavaScript file - it cannot be changed on the server. 

However - the second column won't always be present.  Some users get that column and some don't.  We just want to remove it for those users for whom it is being generated on the server..  Long story why.

Here is what it looks like when you mouse over the courses menu: 

I've been playing around with the empty() function but I can't quite get the find or children or siblings function to get only that part of the menu (and not the first column or subsequent columns in the "Assignments", "Grades", and "Calendar" menus.

The HTML code (simplified a bit for clarity) looks like this:

Top of the navigation:

<ul role="navigation" id="menu">

            <li id="courses_menu_item" class="menu-item">

            <a href="/" class="menu-item-title">Courses<span class="menu-item-title-icon"></span></a>

            <div class="menu-item-drop">

Note "menu-item-drop" is only used once.  The comes the first column, called "menu-item-drop-column"

<table cellspacing="0">

    <tr>

            <td class="menu-item-drop-column" id="menu_enrollments">

                    <h2><a class="customListOpen">Customize</a>My Courses</h2>

                    <ul class="menu-item-drop-column-list">

                        <li class="customListItem" data-id="23423432">

                           <a href="/courses/234234"><span class="name ellipsis" title="Canvas 101...</span>

                           <span class="subtitle ellipsis enrollment_term menu-item-drop-float-right"></span>

                           <span class="subtitle ellipsis">Enrolled as: Teacher</span></a>

                        </li>

                        More courses listed here with <li> tags - removed for clarity

                        <li class="menu-item-view-all"><a href="/courses">View all courses (42)</a></li>

                        </ul>

             </td>

Next column (the one we want to remove starts here)

               <td class="menu-item-drop-column">

                      <h2>Managed Accounts</h2>

                      <ul class="menu-item-drop-column-list">

                              <li>

                              <a href="/accounts/123456">

                              <span class="name ellipsis">Brookline Public Schools</span>

                               </a>  

                              </li>

                              <li class="menu-item-view-all"><a href="/accounts" data-track-category="assignment                               dropdown" data-track-label="navigated">View all accounts (2)</a></li>

                            </ul>

              </td>

    </tr>

  </table>

</div>

</li>

And then the assignment menu (which has the same items as the above... here's just the top)

</li>

      <li id="assignments_menu_item" class="menu-item">

        <a href="/assignments" class="menu-item-title">Assignments<span class="menu-item-title-icon"></span></a>

        <div class="menu-item-drop">

          <table cellspacing="0">

            <tr>

              <td class="menu-item-drop-column">

                <h2>To Grade</h2>

                <ul class="menu-item-drop-column-list">

               <li>

If any one could me figure out how to delete that one column IF it appears and ignore it if it doesn't I would be most grateful.

Thanks,

Sam