1

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?

3
  • ¿Cuáles quieres, todas las que están en: <div id="menu">?
    – A. Cedano
    el 23 ene. 2018 a las 0:29
  • Quiero quitar el href de las que dices Quiero quitar su href. Quiero conservar los demás.
    – akko
    el 23 ene. 2018 a las 0:31
  • ¿Cuáles demás? O sea, ¿tú quieres quitar el href de todas las <a> muestras en el código?
    – A. Cedano
    el 23 ene. 2018 a las 0:32

3 respuestas 3

1

Está realizando mal la selección de elementos debería decirle a JQuery que no tome los a que estén dentro de la clase submenú, esto se puede lograr con not() $("#menu a").not(".sub-menu a"); seleccionamos todas las etiquetas a de #menu pero not las que están dentro de la clase .sub-menu

$(function() {
    var subMenuElementos = $("#menu a").not(".sub-menu 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>

0

Mira este código, haciendo uso de querySelectorAll.

Aquí var eSet = document.getElementById('menu').querySelectorAll('a'); seleccionas todos los <a> dentro del elemento cuyo id es menu, y los recorres para quitarle el atributo.

► Javascript puro

function cambiarLinks() {

  var eSet = document.getElementById('menu').querySelectorAll('a');
  var i = eSet.length;

  while (i--) {
  var url=eSet[i].href;
    eSet[i].removeAttribute('href');
    console.log(url + ' ha sido quitado');
  }
  
}
window.onload = cambiarLinks;
<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>


► jQuery

$(function() {
  var eSet = $('#menu').find('a');
  var i = eSet.length;

  while (i--) {
    var url = eSet[i].href;
    eSet[i].removeAttribute('href');
    console.log(url + ' ha sido quitado');
  }

});
<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>

0

Otra opción seria usar el selector de hijos indicando hasta el nivel deseado:

#menu > nav > ul > li > a

Ejemplo:

$(function() {
    $("#menu > nav > ul > li > a").removeAttr('href');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.