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

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

附注：FWIW，您对main_menu_lang_a_tag所指的内容以及此类变量不是标记，它们是元素。标签是我们用来在HTML源代码中定义元素的文本符号。

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

1 个答案: