文章/答案/技术大牛

发布

社区首页 >问答首页 >从父元素中移除文本而不是附加元素

问从父元素中移除文本而不是附加元素
EN

Stack Overflow用户

提问于 2016-11-07 11:22:19

回答 1查看 77关注 0票数 2

我试图用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个字符。

谢谢。

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-07 11:25:50

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

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源代码中定义元素的文本符号。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40463971

复制

相似问题

问从父元素中移除文本而不是附加元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从父元素中移除文本而不是附加元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从父元素中移除文本而不是附加元素
EN