Question

I’m working with WordPress and 2 different plugins (Icons per post & pages and Multi-Level navigation). With the first plugin I selected a Icon per a page and with the second I built a dropdown menu.

The thing is that I want to show only the page Icon but the plugin remains writing the page title. I want to delete it with jQuery.

This is the generated HTML for the menu:

<ul class="children" style="display: none; visibility: hidden; ">
  <li class="page_item page-item-514">
    <a href="http://www.pausoberriak.net/lan-emailea/onurak/?lang=eu">
      <img src="http://www.pausoberriak.net/wp-content/uploads/icons/beneficios.png" class="page_icon" alt="Onurak">Onurak</a>
  </li>
  <li class="page_item page-item-179">
    <a href="http://www.pausoberriak.net/lan-emailea/lan-emailea-formulak/?lang=eu">
      <img src="http://www.pausoberriak.net/wp-content/uploads/icons/formulas.png" class="page_icon" alt="Formulak">Formulak</a>
    <ul class="children" style="display: none; visibility: hidden; ">
          <li class="page_item page-item-183">
            <a href="http://www.pausoberriak.net/lan-emailea/lan-emailea-formulak/praktikak-enpresetan/?lang=eu">Praktikak enpresetan</a>
          </li>
      <li class="page_item page-item-186">
            <a href="http://www.pausoberriak.net/lan-emailea/lan-emailea-formulak/lanerako-zerbitzuak/?lang=eu">Zerbitzu Okupazionala</a>
          </li>
      <li class="page_item page-item-195">
            <a href="http://www.pausoberriak.net/lan-emailea/lan-emailea-formulak/kontratazioa/?lang=eu">Kontratazioa</a>
          </li>
        </ul>
  </li>
</ul>

I used this code to delete the text, in that case it should delete “Onurak”, “Formulak”, “Praktikak enpresetan”, “Zerbitzu okupazionala” and “kontratazioa” :

<script type="text/javascript">
  jQuery('#suckerfishnav li li a').text("");
</script>

It works, but it also deletes the img tag and children ul. I only want to remove the link text and have the other stuff remain.

Thanks in advance

Answer 1

First, block level elements are not valid inside a elements, i.e. you cannot put the ul element inside a.

You can iterate over all children and only remove text nodes:

jQuery('#suckerfishnav li li a').contents().each(function() {
    if(this.nodeType === 3) {
        this.parentNode.removeChild(this);
    }
});

or

jQuery('#suckerfishnav li li a').contents().filter(function() {
    return this.nodeType === 3;
}).remove()

Reference: .contents, Node