javascript - 从父元素中删除文本但不删除附加元素

Question

我正在尝试使用 javascript 删除一些由插件创建的菜单文本。菜单文本位于共享相同 a 标签的图像旁边。所以我只想查看并单击菜单图像。

生成的代码

<li id="menu-item-15" class="qtranxs-lang-menu qtranxs-lang-menu-en menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-15">
  <a title="English" href="#">Lang:&nbsp;<img src="http://maisha.dev/wp/wp-content/plugins/qtranslate-x/flags/gb.png" alt="English" /></a>
  <ul class="sub-menu">
    <li id="menu-item-16" class="qtranxs-lang-menu-item qtranxs-lang-menu-item-en menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a title="English" href="http://maisha.dev/wp/?lang=en"><img src="http://maisha.dev/wp/wp-content/plugins/qtranslate-x/flags/gb.png" alt="English" />&nbsp;English</a></li>
    <li id="menu-item-17" class="qtranxs-lang-menu-item qtranxs-lang-menu-item-fi menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a title="suomi" href="http://maisha.dev/wp/?lang=fi"><img src="http://maisha.dev/wp/wp-content/plugins/qtranslate-x/flags/fi.png" alt="suomi" />&nbsp;suomi</a></li>
  </ul>
</li>

选择合适的元素

var main_menu_lang_li_tag = document.getElementsByClassName('qtranxs-lang-menu')[0];
var main_menu_lang_a_tag = main_menu_lang_li_tag.getElementsByTagName('a')[0];

我可以只检索文本 Lang:

main_menu_lang_a_tag.text;

或

main_menu_lang_a_tag.innerText;

但如果我尝试删除文本，

main_menu_lang_a_tag.text = "";

图像标签也被删除。

如何删除文本而不是后面的图像标签？ 注意:我真的做不到，从一开始就删除 x 个字符，因为文本字符串内容是可变的。

谢谢。

Answer 1

您可以通过从元素中删除所有文本节点来做到这一点:

var child = main_menu_lang_a_tag.firstChild;
var next;
while (child) {
    next = child.nextSibling;
    if (child.nodeType === 3) { // Text node
        main_menu_lang_a_tag.removeChild(child);
    }
    child = next;
}

您还可以使用 querySelector 更轻松地定位元素:

var main_menu_lang_a_tag = document.querySelector(".qtranxs-lang-menu a");

例子:

console.log("before...");
setTimeout(function() {
  var main_menu_lang_a_tag = document.querySelector(".qtranxs-lang-menu a");
  var child = main_menu_lang_a_tag.firstChild;
  var next;
  while (child) {
    next = child.nextSibling;
    if (child.nodeType === 3) { // Text node
      main_menu_lang_a_tag.removeChild(child);
    }
    child = next;
  }
  console.log("after");
}, 1000);

<ul>
  <li id="menu-item-15" class="qtranxs-lang-menu qtranxs-lang-menu-en menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-15">
    <a title="English" href="#">Lang:&nbsp;<img src="http://example.com/wp/wp-content/plugins/qtranslate-x/flags/gb.png" alt="English" /></a>
    <ul class="sub-menu">
      <li id="menu-item-16" class="qtranxs-lang-menu-item qtranxs-lang-menu-item-en menu-item menu-item-type-custom menu-item-object-custom menu-item-16">
        <a title="English" href="http://example.com/wp/?lang=en">
          <img src="http://example.com/wp/wp-content/plugins/qtranslate-x/flags/gb.png" alt="English" />&nbsp;English</a>
      </li>
      <li id="menu-item-17" class="qtranxs-lang-menu-item qtranxs-lang-menu-item-fi menu-item menu-item-type-custom menu-item-object-custom menu-item-17">
        <a title="suomi" href="http://example.com/wp/?lang=fi">
          <img src="http://example.com/wp/wp-content/plugins/qtranslate-x/flags/fi.png" alt="suomi" />&nbsp;suomi</a>
      </li>
    </ul>
  </li>

</ul>

---

旁注:FWIW，您在 main_menu_lang_a_tag 中指的是什么，此类变量不是标签，它们是元素。标签是我们用来在 HTML 源代码中定义元素的文本符号。