CODEWITHSUNDEEP
javascriptjquery
ngplayground
ngplayground

Reputation: 21617

Javascript removing the last occurence

<div class="breadcrumbs">
    <a title="Go to Page." href="http://www.domain.com/dev" class="home">Home Page</a> &gt; <a title="Go to the News category archives." href="http://www.domain.com/dev"/topics/news/" class="taxonomy category">News</a> &gt; <span>News</span>
</div>

In the above example there are 2 seperators, I'm using the following jQuery('.breadcrumbs .category').remove(); to remove the link to the News but this leaves me with 

<div class="breadcrumbs">
    <a title="Go to Page." href="http://www.domain.com/dev" class="home">Home Page</a> &gt; &gt; <span>News</span>
</div>

What would be the best way to remove one of the &gt;?

Upvotes: 0

Views: 169

Answers (5)

pavlindrom
pavlindrom

Reputation: 393

Update: I understood the problem better.

Update 2: Replacing with matched string, as Bergi suggested.

I came up with the following script that does what you need it to do:

jQuery(".breadcrumbs .category").remove();
var resultingHtml = jQuery(".breadcrumbs").html();
resultingHtml = resultingHtml.replace(/(\s*&gt;){2,}/mi, "$1");
jQuery(".breadcrumbs").html(resultingHtml);

What this script does is first remove the very last node in breadcrumbs, Then it replace any double (or more) &gt; text with a single gt;.

You can see it working on JSFiddle

Upvotes: 0

Corinne Kubler
Corinne Kubler

Reputation: 2092

Inspired from another question on stackoverflow

$.fn.nextNode = function(){ var contents = $(this).parent().contents(); return contents.get(contents.index(this)+1); } $('.breadcrumbs .category').nextNode().remove(); $('.breadcrumbs .category').remove();

Upvotes: 0

Bergi
Bergi

Reputation: 664538

What would be the best way to remove one of the &gt;?

To fix the plugin that generates it (and the News link) in the first place.

What would be the easiest way to remove it via JavaScript?

This will do it:

jQuery('.breadcrumbs .category').each(function() {
    $([this, this.nextSibling]).remove();
});

Upvotes: 4

Justin
Justin

Reputation: 3397

My solution is the same as @David's, but using the single colon syntax, browser support, and removes the annoying link coloring and underlining (Doesn't make the > not a link though. 

.breadcrumbs > a:after{
    content: '>';
    padding-left: 2px;
    display:inline-block;
}

.breadcrumbs > a:link:after{
    color: #000;
    text-decoration: none;
}

Fiddler

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

Don't worry about removing the last occurrence, use css to place the (presentational) > in the right place:

.breadcrumbs a + a::before {
    content: '>';
}

Or, as the current page is a span you might prefer:

.breadcrumbs a::after {
    content: '>';
}

Upvotes: 5

Related Questions