Disable `<a>` link inside <ul> issue

Question

Basically I do have a block of HTML code for nested list as below:

<ul>       
  <li class="level_1">
    <a href="level1.html">Insulated And Extruded</a>
    <ul class="level_2">
      <li><a href="">TE77</a></li>
      <li><a href="">TE78</a></li>
      <li><a href="">T77</a></li>
      <li><a href="">TS77</a></li>
    </ul>
  </li>
  <li class="level_1"><a href="">Grille Type Rolling</a></li>
  <li class="level_1"><a href="">PVC High Speed Doors</a></li>
  <li class="level_1"><a href="">Swinging doors</a></li>
</ul> 

Using this what I need to do is, I want to check li.level_1 has a <ul>, if so then I need to disable <a> link link which is directly inside li.level_1.

This is how I tried it in jquery, but its removing all a from the list.

if($('ul li').has('ul').length) {
  $('ul li > a').removeAttr('href'); 
}

Can anybody tell me how to fix that issue?

Answer 1

You can check if li has ul and disable a like this.

$('.level_1:has(ul) > a').removeAttr('href')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>       
  <li class="level_1">
    <a href="level1.html">Insulated And Extruded</a>
    <ul class="level_2">
      <li><a href="">TE77</a></li>
      <li><a href="">TE78</a></li>
      <li><a href="">T77</a></li>
      <li><a href="">TS77</a></li>
    </ul>
  </li>
  <li class="level_1"><a href="">Grille Type Rolling</a></li>
  <li class="level_1"><a href="">PVC High Speed Doors</a></li>
  <li class="level_1"><a href="">Swinging doors</a></li>
</ul>

Answer 2

You could set an event listener like this:

Set an id to the top level ul element:

<ul id="top_level_ul">

jQuery

$(document).on('click', '#top_level_ul > li > a', function(e) {
   e.preventDefault();
});

---

ALTERNATIVE (pointer-events)

You can also set pointer-events:none to prevent any interaction:

$('#top_level_ul > li > a').each(function() {
   $(this.addClass('noPointer'));
});

CSS

.noPointer {
   pointer-events: none;
}