Using javascript to remove the last instance of a specific HTML entity (breadcrumb)

Question

I need to remove the last instance of

&gt;

from:

<b>
<a href="link">Home</a> &gt;
<a href="link">Category</a> &gt;
<a href="link">Sub-category</a> &gt;
<a href="link">Sub-sub-category</a> &gt;
</b>

I assume regex will need to be employed, but I haven't found any good ways to do it. I'm removing the last instance of the link with

(a:last).remove();

but, after a couple iterations, I get multiple > > > in a row with no links between

This might be helpful: http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — showdev, Dec 13 '13 at 18:12

score 2 · Answer 1 · answered Dec 13 '13 at 18:21

2

How about a solution in CSS instead of javascript?

CSS

.link {
    display: inline-block;
}

.link:after {
    content: ' \003e';
}

.link:last-of-type:after {
    content: '';
}

HTML

<div class="link"> <a href="#">Crumb 1</a> </div>
<div class="link"> <a href="#">Crumb 2</a> </div>
<div class="link"> <a href="#">Crumb 3</a> </div>

see http://jsfiddle.net/stackolee/tzbDe/

answered Dec 13 '13 at 18:21

stakolee

893
1
7
20

It's a nice solution. I think it's slightly more elegant (and shorter) to use `
` instead of a div with a class, like in this exameple: http://stackoverflow.com/a/5362995/1535827

Strille

Dec 13 '13 at 18:26

score 0 · Answer 2 · answered Dec 13 '13 at 18:15

0

Could you wrap <a href="link">...</a> > in a span like so: <span><a href="link">...</a> ></span> and then do (span:last).remove();?

It would lead to a cleaner solution with little extra markup.

answered Dec 13 '13 at 18:15

khalid13

2,767
2
30
48

score 0 · Answer 3 · answered Dec 13 '13 at 18:22

If you can edit the markup, I'd recomment khalid13's answer. Otherwise, you could try showdev's comment to select a text node or hack through it like this:

//where b is your `<b>` element:
var links = b.innerHTML.split('&gt;')
links.pop()
b.innerHTML = links.join('&gt;')

What I'm doing here is splitting the menu into a JS array based on the '>' characters, then removing the last element of the array and joining it all back together again.

jfriend00 · Answer 4 · 2013-12-13T18:37:22.920

If you really want to do this in plain javascript, you can do this:

// pass the node before where you want to look for the ">"
function removeTrailingGt(start) {
    var node = start.nextSibling;
    while (node && node.nodeType === 3) {
        if (node.nodeValue.indexOf(">") !== -1) {
            node.nodeValue = node.nodeValue.replace(">", "");
            break;
        }
        node = node.nextSibling;
    }
}

It starts from the last link in your containing object and then searches all following text nodes and removes the first ">" that it finds.

Working demo: http://jsfiddle.net/jfriend00/BC647/

Using javascript to remove the last instance of a specific HTML entity (breadcrumb)

4 Answers4