I have made a simple arrow key navigation list (using firedevs jquery keynav plugin) which can be seen here: https://output.jsbin.com/zowowo
To edit: https://jsbin.com/zowowo/edit?html,css,js
It works right now but after clicking on Contact Group 1 or 2 menu to filter the list with .toggle(), it's still navigating the removed/hidden list items. Tried also using .remove() instead, but the same problem remains. The only way I could get it to work was to make a complete refresh of the page with different html.
I would like to simply be able to navigate only the shown items after filtering and the removed ones should not be navigable. One idea is to make it hidden instead of removing and in the script check if it's visible, otherwise ignore it but I'm not sure how to accomplish that since I'm new to frontend. There are probably various ways to accomplish the result.
I would really appreciate if some frontend pro can shed some light, thanks!