javascript - 使用 jQuery 删除链接文本

Question

我正在使用 WordPress 和 2 个不同的插件(每个帖子和页面的图标以及多级导航)。使用第一个插件，我为每个页面选择了一个图标，使用第二个插件，我构建了一个下拉菜单。

问题是我只想显示页面图标，但插件仍然写入页面标题。我想用 jQuery 删除它。

这是为菜单生成的 HTML:

<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>

我使用此代码删除了文本，在这种情况下，它应该删除“Onurak”、“Formulak”、“Praktikak enpresetan”、“Zerbitzu okupazionala”和“kontratazioa”:

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

它有效，但它也会删除 img 标签和子 ul。我只想删除链接文本并保留其他内容。

提前致谢

Answer 1

首先， block 级元素在 a 元素内无效，即您不能将 ul 元素放入 a 内。

您可以迭代所有子节点并仅删除文本节点:

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

或

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

引用: .contents , Node