Question

Let’s say I have this line somewhere in my code:

<ul id="mobileBtnsBot">
            <li>
                <a href="/m/alert/index.shtml"><span class="alertsBtn"></span><span class="btnText">Alerts & Advisories</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="schedBtn"></span><span class="btnText">Schedules</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="mapsBtn"></span><span class="btnText">Maps & Stations</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="trainBtn"></span><span class="btnText">TrainView</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="ntaBtn"></span><span class="btnText">Next To Arrive</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="faresBtn"></span><span class="btnText">Fares</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="mediaBtn"></span><span class="btnText">@ SEPTA</span></a><div class="button_last"></div>
            </li>
            <li>
                <a href="/m/alert/index.shtml"><span class="button_beg"></span><span class="btnText">Find my Location</span></a><div class="button_last"></div>
            </li>
        </ul>

I want to use JavaScript to find the <a> holding the text Find my location and hide it according to whichever user-agent your on.

I know you are not supposed to use user-agents as such but I can’t use any server-side languages.

If anyone knows how to accomplish this or has a better idea, please share.

EDIT: This page is being created from a web form in Alfresco CMS. If I give it an ID they all get the ID.

isBrowser.js

if (navigator.userAgent.indexOf('Gecko')!= -1
         || navigator.userAgent.indexOf('MSIE')!= -1 || navigator.userAgent.indexOf('Opera')!= -1 || navigator.userAgent.indexOf('Chrome')!= -1) {
    document.write('<link rel="stylesheet" href="/m/css/smartmobile.css" type="text/css" />');
}
else if (navigator.userAgent.indexOf('webkit')!= -1) {
    document.write('<link rel="stylesheet" href="/m/css/smartmobile.css" type="text/css" />');
}
else{
  alert("load mobile css");
  document.write('<link rel="stylesheet" href="/m/css/mobile.css" type="text/css" />');
    function hideListItem(text)
    {
        var ul = document.getElementById("mobileBtnsBot");
        alert("line1");
        for(var i = 0; i < ul.childNodes.length; i++)
        {
          alert("line2-loop");
            var li = ul.childNodes[i];
    alert("line3-loop");
            // Element node.
            if (li.nodeType == 1)
            {
              alert("line4-loop");
                // Find the text in all of the inner-html.
                if (li.innerHTML.indexOf(text) != -1)
                {
                  alert("line5-loop");
                    li.style.display = "none";
                    break;
                }
                alert("line6-loop");
            }
            alert("line7-loop");
        }
        alert("line8");
    }
     hideListItem("Find my Location");
}

mobile-script.js

window.onload = function () {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
var linkElementLnk = document.getElementById("BackButtonlnk");
linkElementLnk.style.display = 'none';
insert();
}

function insert(){
var linkElement = document.getElementById("BackButton");
var linkElementLnk = document.getElementById("BackButtonlnk");
var loc_array = document.location.href.split('/');

if (loc_array[loc_array.length-3] == "maps"|| loc_array[loc_array.length-2] == "stations" || loc_array[loc_array.length-3] == "stations" )
{
  linkElementLnk.style.display = 'block';
  var newT = document.createTextNode("Stations & Maps");
}
else if (loc_array[loc_array.length-3] == "m")
{
  linkElementLnk.style.display = 'none';
}
else if (loc_array[loc_array.length-3] != "m")
{
    linkElementLnk.style.display = 'block';

     if (loc_array[loc_array.length-2] == "w" || loc_array[loc_array.length-2] == "s" || loc_array[loc_array.length-2] == "h" )
     {
        var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length-2])));
     }

     else
     {
          if (loc_array[loc_array.length-1] == "index.html" || loc_array[loc_array.length-1] == "index.shtml" || loc_array[loc_array.length-1] == "")
          {
          var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length-3])));
          }
          else
          {
          var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length-2])));
          }
     }
}
linkElement.appendChild(newT);
}
function capWords(str){ 
   var words = str.split(" "); 
   for (var i=0 ; i < words.length ; i++){ 
      var testwd = words[i]; 
      var firLet = testwd.substr(0,1); 
      var rest = testwd.substr(1, testwd.length -1) 
      words[i] = firLet.toUpperCase() + rest 
   }
   return words;
} 

Answer 1

EDIT:

$("#mobileBtns > li:has(span:contains(TrainView))").hide();

Change TrainView to whatever text you want to search for. This selects the li element under mobileBtns that has a span that contains the text TrainView. If you want a non-jquery solution let me know.

function isBrowser(browserName)
{
  var userAgent = navigator.userAgent;

  for(var i = 0; i < browserName.length; i++)
  {
      if(userAgent.indexOf(browserName[i]) != -1)
      {
          return true;
      }
  }

  return false;
}

if(isBrowser(["BlackBerry"]))
{
   document.write('<link rel="stylesheet" href="/m/css/mobile.css" type="text/css" />');
}
else if(isBrowser(["iPhone", "Android", "Gecko", "MSIE", "Chrome", "Opera"]))
{
  document.write('<link rel="stylesheet" href="/m/css/smartmobile.css" type="text/css" />');
}
else
{
  document.write('<link rel="stylesheet" href="/m/css/mobile.css" type="text/css" />');
}

EDIT: You need to wrap the $(...) code after the document has loaded like this:

$(document).ready(function ()
{
    $("#mobileBtns > li:has(span:contains(TrainView))").hide();
});

EDIT 2: Here’s a javascript funciton that doesn’t use jQuery to find/hide the list item. Replace the $(document).read()... with this code:

function hideListItem(text)
{
    var ul = document.getElementById("mobileBtns");

    for(var i = 0; i < ul.childNodes.length; i++)
    {
        var li = ul.childNodes[i];

        // Element node.
        if (li.nodeType == 1)
        {
            // Find the text in all of the inner-html.
            if (li.innerHTML.indexOf(text) != -1)
            {
                li.style.display = "none";
                break;
            }
        }
    }

}

window.onload = function (e)
{
    hideListItem("Schedules");
};

EDIT 3: Ok I think window.onload isn’t supported in your version of the browser. What you can do is move the JavaScript call to hideListItem() code to the end of the body tag:

<html>
<head>
<!-- put your hideListItem function declaration here -->
</head>
<body>

<!--...stuff here...-->

<script type="text/javascript">
hideListItem("Schedules");
</script>

</body>
</html>