jquery remove span in breadcrumb

Question

I would like to remove some elements of a breadcrumb. Essentialy > Pages > default What is the best way to remove those accross the site with jQuery ?

Home > Agenda > Pages > default

The result would be Home > Agenda

<div class="breadcrumb">    
<span id="ctl00_PlaceHolderTeqBreadcrumb_siteMapPath">
    <span><a href="/" class="ms-sitemapdirectional">Home</a></span>
    <span> &gt; </span>
    <span><a href="/Agenda" class="ms-sitemapdirectional">Agenda</a></span>
    <span> &gt; </span>
    <span><a href="/Agenda/_layouts/listform.aspx?ListId=%7BA82B0240%2D8259%2D4F79%2DA710%2D66E4BA436A53%7D&amp;PageType=0" class="ms-sitemapdirectional">Pages</a></span>
    <span> &gt; </span>
    <span><a href="/Agenda/Pages/default.aspx" class="current">default</a></span>
    </span>
</div>

Home > All Meetings > Pages > default

the result would be Home > All Meetings

<div class="breadcrumb">    
<span id="ctl00_PlaceHolderTeqBreadcrumb_siteMapPath"><span>
    <a href="/" class="ms-sitemapdirectional">Home</a></span>
    <span> &gt; </span>
    <span><a href="/AllMeetings" class="ms-sitemapdirectional">All Meetings</a></span>
    <span> &gt; </span>
    <span><a href="/AllMeetings/_layouts/listform.aspx?ListId=%7B9A69EF7E%2D31FF%2D49C7%2DA191%2D5CE2240E7ABC%7D&amp;PageType=0" class="ms-sitemapdirectional">Pages</a></span>
    <span> &gt; </span>
    <span><a href="/AllMeetings/Pages/default.aspx" class="current">default</a></span>
    </span>
</div>

and in some cases i have

Home > All Meetings > Pages > Functional Meetings

where i would like to remove > Pages

The result would be

Les Embiez 2012 > All Meetings > Functional Meetings

<div class="breadcrumb">    
<span id="ctl00_PlaceHolderTeqBreadcrumb_siteMapPath">
    <span><a href="/" class="ms-sitemapdirectional">Home</a></span>
    <span> &gt; </span><span><a href="/AllMeetings" class="ms-sitemapdirectional">All Meetings</a></span>
    <span> &gt; </span><span><a href="/AllMeetings/_layouts/listform.aspx?ListId=%7B9A69EF7E%2D31FF%2D49C7%2DA191%2D5CE2240E7ABC%7D&amp;PageType=0" class="ms-sitemapdirectional">Pages</a></span>
    <span> &gt; </span>
    <span><a href="/AllMeetings/Pages/Functional%20Meetings.aspx" class="current">Functional Meetings</a></span>
    </span>
</div>

Edit

I am currently using the following JQuery to achieve this:

var url = location.pathname;
        if (url.indexOf('/Pages/default.aspx') >= 0) {
            $(".breadcrumb span").slice(-4).remove()
        }
        else {
            $(".breadcrumb span a:contains('Pages'),.breadcrumb span a:contains('default')").remove();
            $(".breadcrumb span:contains('>')").last().remove();
        }

I did not down-vote this question and it is a shame that the person who did chose not to leave their reason. I would suspect this may be because you have not shown that you have researched the problem or tried anything yourself. What have you tried already? — My Head Hurts, Feb 07 '12 at 14:42
:) yes i have. i just looking a the best option. asking the community for advice :) — user472285, Feb 07 '12 at 14:43
Ok, well the best thing to do is show the code you have already and then people can offer advice on how it could be improved. The worst thing about asking "the best way to things" is that is often open to opinion. So it could be better to ask, how could I improve this... — My Head Hurts, Feb 07 '12 at 14:44
didn't downvote either. it is a good question and although a quick google gives a number of ways to do this, it doesn't hurt to ask it. I am curious why you want to programmatically remove the spans rather than updating the html without the spans. — Brian, Feb 07 '12 at 14:47
Also, not to try and move this question away from Stack Overflow, but Stack Exchange have a code review site (currently in Beta) which you might find useful when looking for ways to improve your code: http://codereview.stackexchange.com/ — My Head Hurts, Feb 07 '12 at 14:48
i had $(".teq-breadcrumb a:contains('Pages')" ).remove() $(".teq-breadcrumb a:contains('default')" ).remove() — user472285, Feb 07 '12 at 14:53

score 0 · Answer 1 · answered Feb 07 '12 at 14:42

0

Can you add an id or class to the span tag which identifies it? Then you can use

$('.spanBCPages').remove();
$('.spanBCDefault').remove();

or similar

answered Feb 07 '12 at 14:42

CompanyDroneFromSector7G

4,291
13
54
97

Rory McCrossan · Answer 2 · 2012-02-07T14:56:48.660

0

Try this:

$("span a").filter(function(index) {
    return $(this).text() == "Pages";
}).parent().prev().nextAll("span").remove();

edited Feb 07 '12 at 14:56

answered Feb 07 '12 at 14:43

Rory McCrossan

331,213
40
305
339

user472285 · Accepted Answer · 2012-02-08T18:34:49.507

0

var url = location.pathname;
        if (url.indexOf('/Pages/default.aspx') >= 0) {
            $(".breadcrumb span").slice(-4).remove()
        }
        else {
            $(".breadcrumb span a:contains('Pages'),.breadcrumb span a:contains('default')").remove();
            $(".breadcrumb span:contains('>')").last().remove();
        }

edited Feb 08 '12 at 18:34

answered Feb 08 '12 at 09:29

user472285

2,604
5
37
55

jquery remove span in breadcrumb

3 Answers3