Hide part of link in global navigation breadcrumb

Hi Friends,

Here the user requirement is to hide top level site URL(link) in the global Navigation breadcrumb in the sub site home page (where user is going to share the site URL with others), and not to hide entire breadcrumb.

Actual snap:

so i proceed to check with the IE Developper tool. and the structure in side DIV for the breadcrumb is as:
<SPAN id="ct100someblablablaID".... >
       <span>
          <a class="anchorclass">ROOT SITE COLLECTION</a>
       </span>
       <span>
          TEXT (>)
       </span>
       <span>
          <a class="anchorclass">SUB SITE COLLECTION</a>
       </span>
       <span>
          TEXT (>)
       </span>
and so on.

so decided to go with JQuery SLECTORS. and the respected script as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

$('#ctl00_PlaceHolderGlobalNavigation_PlaceHolderGlobalNavigationSiteMap_GlobalNavigationSiteMap span:nth-child(4)').css({'display':'none'});
$('#ctl00_PlaceHolderGlobalNavigation_PlaceHolderGlobalNavigationSiteMap_GlobalNavigationSiteMap span:nth-child(5)').css({'display':'none'});

});
</script>

so in the script selecting sub span elements with in root element SPAN ID,
$('#ROOT_ELEMENT_ID span:nth-child(4)').css({'display':'none'});
this hides my ">" char & selection child node 5 hides my "ROOT SITE URL".

and resulted O/P :

JQuery saved my life....

Regards,
JK