Remove link with title attribute and add class to parent li

Question

There is a view menu:

<ul id="menu-primary-1" class="nav navbar-nav center"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6"> <a href="/" title="Главная">Главная</a> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"> <a href="#" title="divider">divider</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-7 active"> <a href="http://test2/2016/07/24/page/" title="page">page</a> </li> </ul>

How to make the link with title="divider" and href="#" removed, and the class .active added to its parent <li> . In this case, everything else so that it remains.

 window.onload=function(){ var o=document.querySelector('a[title="divider"]'); o.parentNode.removeChild(o); $(this).parent().toggleClass('divider'); };

This did not work out ((By the way, yes, if it is so important then the menu is generated by wordpress.

 <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="navbar-brand">МЕНЮ</span> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <?php /* Primary navigation */ wp_nav_menu( array( 'menu' => 'primary', 'depth' => 2, 'container' => false, 'menu_class' => 'nav navbar-nav center', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', //Process nav menu using our custom nav walker 'walker' => new wp_bootstrap_navwalker()) ); ?> </div> </div> </nav>

At the output, we have the menu as it is written above.

C.Raf.T C.Raf.T 3,954 1 golden mark 6 silver marks 19 bronze marks · Answer 1 · 2016-07-24T13:42:34

 window.onload=function(){ $('a[title="divider"]').parent().addClass('active'); $('a[title="divider"]').hide(); };

C.Raf.T

3,954 1 golden mark 6 silver marks 19 bronze marks

Unfortunately for some reason neither the first nor the second works ((( - seledkapod 1:53 pm
@seledkapod what kind of result do you want to see? - C.Raf.T pm
The above described the problem in more detail, I do not argue in html your code works with a bang, but for WordPress and there. - seledkapod pm
maybe js works before your nav loads? - C.Raf.T
@ C.Raf.T, but what about window.onload ? - Mr. Black

|

Mr. Black Mr. Black 3,324 1 golden mark 9 silver marks 31 bronze badge · Answer 2 · 2016-07-24T13:42:30

 window.onload = function() { o = document.querySelector('a[title="divider"]'); o.parentNode.classList.toggle('active'); o.remove(); }

 <ul id="menu-primary-1" class="nav navbar-nav center"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6"> <a href="/" title="Главная">Главная</a> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"> <a href="#" title="divider">divider</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-7 active"> <a href="http://test2/2016/07/24/page/" title="page">page</a> </li> </ul>

Does not work, neither the link is deleted, nor the class is added (

Remove link with title attribute and add class to parent li

2 answers 2

More articles: