How to remove the anchor tag from parent class not from child class?

Question

I am removing the anchor tag from the parent class which is working but it also removing from the child class. I need an anchor tag on the child class.

Would you help me out?

 $(function() { $('#left-side-menu li.menu-item-has-children a').contents().unwrap(); });

 <nav id="left-side-menu"> <ul> <li><a href="">Test 1</a></li> <li class="menu-item-has-children"><a href="">Test 2</a> <ul> <li><a href="">Test 2-1</a></li> <li><a href="">Test 2-2</a></li> </ul> </li> <li><a href="">Test 3</a></li> </ul> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

Use Child Combinator for CSS Selectors

Solution for your example

replace #left-side-menu li.menu-item-has-children a to #left-side-menu li.menu-item-has-children > a to detect the tag anchor link which locate directly inside li.menu-item-has-children element

final code

$(function() {
  $('#left-side-menu li.menu-item-has-children > a').contents().unwrap();
});

Answer 2

You can simply do this with CSS. Hope works for you

 .disable { pointer-events: none; text-decoration: none; color: black; }

 <nav id="left-side-menu"> <ul> <li><a href="">Test 1</a></li> <li><a class="disable" href="">Test 2</a> <ul> <li><a href="">Test 2-1</a></li> <li><a href="">Test 2-2</a></li> </ul> </li> <li><a href="">Test 3</a></li> </ul> </nav>