Hidding Site Collection in breadcrumb navigation using jQuery

Question

I have vertical breadcrumb navigation on my sharepoint site portal. The site is fully customized and uses custom masterpage. I have added custom breadcrumb to the site however, it shows "Site Collection" as the root node.

Like this Site Collection > Home > Calendar > Events

Note: The site collection redirects to the same page as Home.

Here's what I've tried so far but it hides "site collection" but it display an image before.

    <style>
    .bc-root {
        display: none;
    }
</style>

   $(document).ready(function () {
        var rootNode = $("span[id$=ctl00_navig] > span:eq(0)");
        if (rootNode.attr("class") == "bc-root") {
            rootNode.hide();
            $(rootNode).next("span").css('display', 'none');
        }
    });
</script>

    <div id="breadcrumb" style="width: 1000px; margin: 0 auto">
        <span id="ctl00_navig"><a href="#ctl00_navig_SkipLink">
            <img alt="Skip Navigation Links" width="0" height="0" style="border-width: 0px;"></a>
            <span><a title="Home" class="bc-root" href="default.aspx">site collections</a></span>
            <span><img id="ctl00_navig_ctl01_Image1" src="breadcrumb_line.png"></span>
            <span>Home</span><a id="ctl00_navig_SkipLink"></a>
        </span>
    </div>

Answer 1

$(function() {
    $('.bc-root').hide().parent().parent().find('img[src="breadcrumb_line.png"]:first').parent().hide();
});

http://jsfiddle.net/93c85vna/1/

try it