Styling Options menus on the search page
Greetings,
I want to remove both separators lines and disabled selections from the various drop-down options menus on forum/tkb/blog pages, such as Topic Options and Options on topics pages, Article Options on KB pages, Blog Options, etc. This also includes those found on the search pages, such as the Search Options and Best Match drop-downs.
In order to accomplish the removal of unwanted list items, because of the way the HTML is structured, I could not use CSS because the LI elements have no class names on them--only their child elements do. Here is a simplified example of what I'm dealing with:
<ul id="dropdownmenuitems_0" class="lia-menu-dropdown-items">
<li><a class="lia-link-navigation ..." ...>Link</a></li>
<li><a class="lia-link-navigation ..." ...>Link</a></li>
<li><span class="lia-separator ...">...</span></li>
<li><a class="lia-link-navigation ..." ...>Link</a></li>
<li><a class="lia-link-navigation ..." ...>Link</a></li>
<li><span class="lia-link-navigation lia-link-disabled ...">Disabled Link</span></li>
<li><span class="lia-separator ...">...</span></li>
<li><a class="lia-link-navigation ..." ...>Link</a></li>
</ul>
I want to target items identified with the classes lia-separator and lia-link-disabled in red above, but these classes are on child elements of the LI, not the LI themselves. AFAIK, you cannot assign CSS to a parent based on a child.
So I turned to jQuery to target those classes and then used a parent('LI').remove() sequence to take care of them.
This worked great, until I discovered that the search pages have option menus like these that are part of AJAX-based functionality. So when you first go to the search page the Search Options and Best Match menus look fine. However, once a search is executed and the results section of the page is refreshed (along with the menus), there are extra lines and space in the menus, since my javascript to remove the LI's initially is not re-executed. While I can use CSS to hide the A or SPAN elements based on class, the LI elements still remain which have the border or other styling that I cannot change.
So my question is, how can I fix these menus, post-AJAX refresh? Is there an callback function I can hook into? Or another way in studio that I have missed?