Javascript removing the last occurence

Question

<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 >?

regular expressions are very powerful indeed, don't underestimate them. — Hawk, Jun 02 '14 at 14:35
@Donald: Why do you want to remove the middle `News` element? — Bergi, Jun 02 '14 at 14:35
@Hawk: I know what they are capable of, but they're the wrong tool for [this job](http://stackoverflow.com/a/1732454/1048572)! — Bergi, Jun 02 '14 at 14:36
@Bergi a plugin I am using gives the `` while on the News page so I wanted to just remove it — ngplayground, Jun 02 '14 at 14:36
What's generating the breadcrumb links? Wouldn't it be better to modify *that*? — j08691, Jun 02 '14 at 14:37
@Donald: Can't you fix that plugin instead of messing with its output client-side? Is `/News` the only page where this happens or should it be more generic? — Bergi, Jun 02 '14 at 14:38
@Bergi he wants to remove the &gt, one of them so it is possible as long as you can get inside using DOM — Hawk, Jun 02 '14 at 14:38
@Hawk: Yes, you can get it via the DOM more easily than writing an error-prone regex — Bergi, Jun 02 '14 at 14:40
when you get it through the DOM, you would still write a regex to remove only one of the &gt. — Hawk, Jun 02 '14 at 14:41
@Hawk: please post an answer that uses regex, rather than a series of comments defending their use. I think they're the wrong tool, as does Bergi, it seems. But if you feel they're correct that's your call. — David Thomas, Jun 02 '14 at 14:42
Maybe you can select only what you need and replace the whole thing. — Wilmer, Jun 02 '14 at 14:44
Possible duplicate of [How to select text node in DOM with jQuery?](http://stackoverflow.com/questions/8598701/how-to-select-text-node-in-dom-using-jquery) — Blazemonger, Jun 02 '14 at 14:44
I just added an answer using Regex, it is the right tool here, since he wants to replace double `gt;` text with single `gt;`. — pavlindrom, Jun 02 '14 at 14:57

score 5 · Answer 1 · answered Jun 02 '14 at 14:35

5

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: '>';
}

answered Jun 02 '14 at 14:35

David Thomas

249,100
51
377
410

score 4 · Accepted Answer · answered Jun 02 '14 at 14:43

What would be the best way to remove one of the >?

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();
});

score 0 · Answer 3 · answered Jun 02 '14 at 14:41

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

pavlindrom · Answer 4 · 2014-06-02T15:01:39.833

0

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) > text with a single gt;.

You can see it working on JSFiddle

edited Jun 02 '14 at 15:01

answered Jun 02 '14 at 14:43

pavlindrom

366
2
12

You should replace by `$1`. Your code might insert unwanted whitespaces. – Bergi Jun 02 '14 at 14:57
I was relying on the fact that spaces get dropped in HTML, but I will update the answer. – pavlindrom Jun 02 '14 at 14:59

score 0 · Answer 5 · edited May 23 '17 at 12:05

0

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();

edited May 23 '17 at 12:05

Community

1
1

answered Jun 02 '14 at 14:48

Corinne Kubler

2,072
5
22
34

Whoa, that hurts. `$.fn.nextNode = function(){ return this.map(function(){return this.nextSibling;}); };` – Bergi Jun 02 '14 at 14:53

Javascript removing the last occurence

5 Answers5

Fiddler