Remove unwanted item in SharePoint 2010 Navigation Up Menu

I created several web part pages and put them to the site's document library("SitePages"):

http://mysite.com/worksite/SitePages/workpage1.aspx
http://mysite.com/worksite/SitePages/workpage2.aspx
...

Then I configured navigation to the pages.
When I navigate to any one of the pages, click the Navigate Up button, I can see the following hierarchy menu:

Home -> worksite -> SitePages -> workpage?.aspx

The "SitePages" is the name of a document library, I don't want it to show to the client, I need to remove this item from the hierarchy menu. I have done this as following.

Getting the HTML code by "View source", search string "SitePages" (the document library name), we will find following code snippet:

<ul class="s4-breadcrumb">
        <li class="s4-breadcrumbRootNode"><span class="s4-breadcrumb-arrowcont"><span style="height: 16px;
            width: 16px; position: relative; display: inline-block; overflow: hidden;" class="s4-clust s4-breadcrumb">
            <img src="/_layouts/images/fgimg.png" alt="" style="border-width: 0px; position: absolute;
                left: -0px !important; top: -353px !important;" />
        </span></span><a class="s4-breadcrumbRootNode" href="/">Home</a><ul class="s4-breadcrumbRootNode">
            <li class="s4-breadcrumbNode"><span class="s4-breadcrumb-arrowcont"><span style="height: 16px;
                width: 16px; position: relative; display: inline-block; overflow: hidden;" class="s4-clust s4-breadcrumb">
                <img src="/_layouts/images/fgimg.png" alt="" style="border-width: 0px; position: absolute;
                    left: -0px !important; top: -353px !important;" />
            </span></span><a class="s4-breadcrumbNode" href="/worksite">worksite</a><ul
                class="s4-breadcrumbNode">
                <li class="s4-breadcrumbNode"><span class="s4-breadcrumb-arrowcont"><span style="height: 16px;
                    width: 16px; position: relative; display: inline-block; overflow: hidden;" class="s4-clust s4-breadcrumb">
                    <img src="/_layouts/images/fgimg.png" alt="" style="border-width: 0px; position: absolute;
                        left: -0px !important; top: -353px !important;" />
                </span></span><a class="s4-breadcrumbNode" href="http://mysite.com/worksite/_layouts/listform.aspx?ListId=%7B8CF0AC51%2D1703%2D4126%2DAE21%2DB60CF69F6EBE%7D&amp;PageType=0">
                    SitePages</a><ul class="s4-breadcrumbNode">
                        <li class="s4-breadcrumbCurrentNode"><span class="s4-breadcrumb-arrowcont"><span
                            style="height: 16px; width: 16px; position: relative; display: inline-block;
                            overflow: hidden;" class="s4-clust s4-breadcrumb">
                            <img src="/_layouts/images/fgimg.png" alt="" style="border-width: 0px; position: absolute;
                                left: -0px !important; top: -353px !important;" />
                        </span></span><span class="s4-breadcrumbCurrentNode">workpage?</span></li></ul>
                </li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>

We can see "SitePages" is at the third level of the hierarchy menu.
What we need to do is: first, get the current level DOM("SitePages") node, second, get the upper level and forth level DOM node, and then replace the third level node with forth level node.
Following is the javascript code:

<script type="text/javascript" language="javascript">
  var x = document.getElementsByTagName("a")
  var i=0;
  for (i=0;i<x.length;i++)
  {
    if (x[i].className=="s4-breadcrumbNode")
    {
     if (x[i].innerHTML=="SitePages")
     {
         var parent1=x[i].parentNode.parentNode;

         var parent2=parent1.parentNode;

         var child1=parent1.lastChild;

         var child2=child1.lastChild;

         parent2.replaceChild(child2,parent1);

      }
    }
  }
</script>

Put the javascript to a Notepad file and upload it to the site's document library, then add a Content Editor web part to the web part page, in Edit Web Part, enter the Content Link with the uploaded javascript file url, then the "SitePages" item is removed from the Navigation Up hierarchy menu.