Leon Leon - 27 days ago 8
Javascript Question

Remove text but not appended element from parent element

I'm trying to remove some menu text, created by a plugin, with javascript. The menu text is next to a image which shares the same

a
tag. So I just want to see and click the menu image.

The generated code

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


Selecting the appropriate element

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


I can retrieve just the text
Lang:
with

main_menu_lang_a_tag.text;


or

main_menu_lang_a_tag.innerText;


but if I try and remove the text,

main_menu_lang_a_tag.text = "";


the image tag is also removed.

How can I remove the text and not the image tag that follows? Note: I cannot really do, delete x number of characters from the start as the text string content is variable.

Thanks.

Answer

You can do that by removing all text nodes from the element:

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

You can also locate the element a bit more easily with querySelector:

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

Example:

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>


Side note: FWIW, what you're referring to with your main_menu_lang_a_tag and such variables aren't tags, they're elements. Tags are the text notation we use to define elements in HTML source code.

Comments