Tengo esta estructura HTML
.
var subMenuElementos = $('#menu nav ul li a');
subMenuElementos.removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<nav>
<ul>
<li><a href="https://google.com">Quiero quitar su href</a></li>
<li><a href="https://google.com">Quiero quitar su href</a>
<div class="sub-menu">
<ul>
<li><a href="https://google.com">Quiero conservar su href</a></li>
<li><a href="https://google.com">Quiero conservar su href</a></li>
</ul>
</div>
</li>
<li><a href="https://google.com">Quiero quitar su href</a></li>
<li><a href="https://google.com">Quiero quitar su href</a></li>
<li><a href="https://google.com">Quiero quitar su href</a>
<div class="sub-menu">
<ul>
<li><a href="https://google.com">Quiero conservar su href</a></li>
<li><a href="https://google.com">Quiero conservar su href</a></li>
</ul>
</div>
</li>
<li><a href="https://google.com">Quiero quitar su href</a></li>
</ul>
</nav>
</div>
El problema es que no estoy seleccionando correctamente las etiquetas <a>
que quiero.
¿Cuál sería la manera correcta de seleccionarlas?
<div id="menu">
?Quiero quitar su href
. Quiero conservar los demás.href
de todas las<a>
muestras en el código?