Question

I have Joomla menu as below.

<li class="level1 parent">
<a href="/www.dd.com/index.php/donations" class="level1 parent">
<span>Donations</span>
</a>
</li>

<li class="level1 parent">
<a href="/www.dd.com/index.php/fund" class="level1 parent">
<span>Fund</span>
</a>
</li>

What I am able to do is find the list menu that I have.

var texts = [], lis = document.getElementsByTagName("span");
var im=lis.length;
var textFound;
for(var i=0; im>i; i++) {
textFound = lis[i].firstChild.nodeValue
  texts.push(lis[i].firstChild.nodeValue);
}

What I want to do is if menu is Donations, hide it

I tried with this.style.display='none';, however it is not working.

var texts = [], lis = document.getElementsByTagName("span");
var im=lis.length;
var textFound;
for(var i=0; im>i; i++) {
textFound = lis[i].firstChild.nodeValue
  texts.push(lis[i].firstChild.nodeValue);
  this.style.display='none';
}

Any idea how to get this done?

Note, I want this to be done in JAVASCRIPT ONLY. NO JQUERY

Answer 1

Instead of this, it should be like lis[i].style.display = 'none'

Also you will need to compare the text you get.. I don’t see any comparision condition to hide specific texts.