how i can select then hide link based on its text

Question

I have the following link which will be rendered inside my breadcrumb navigation:-

<a class="breadcrumbNode" href="http://******/kb/CustomerKB/_layouts/15/listform.aspx?ListId=%7B9A25812B%2DE8BA%2D4085%2D95D0%2D9E05CF3DC441%7D&amp;PageType=0&amp;RootFolder=%2Fkb%2FCustomerKB">CustomerKB</a>

so is there a way using CSS to hide the link which have the following text CustomerKB ??

Alex Eggers · Answer 1 · 2017-10-24T15:05:19.597

0

If you want to hide all elements containing specific text, you will have to use Javascript. The only way I can think of to do this with CSS is by adding another class to the links you want to hide, or wrapping the text in another tag and giving this tag specific classes depending on what's in it, and you do not seem to want to do that.

Any particular reason you do not want to use JS?

If you can use Javascript, I would simply do something like

document.getElementsByClassName("breadcrumbNode").forEach(function(item) {
    if (item.innerHTML === "whatevertext") {
        item.classList.add("hidden")
    }
});

edited Oct 24 '17 at 15:05

answered Oct 24 '17 at 14:46

Alex Eggers

328
3
16

i do not want to hide all the `` which have `.breadcrumbNode` as all the breadcrumb links have this class.. that why i want to hide based on the link text.. – John John Oct 24 '17 at 14:47
1

@johnG ah I got you, editing. – Alex Eggers Oct 24 '17 at 14:48
if i can not do it with css,, then i can use javascript.. – John John Oct 24 '17 at 14:57

abney317 · Accepted Answer · 2017-10-24T15:01:49.497

0

You can use the *= selector to select based on the link.

a[href*="CustomerKB"] {
    display:none
}

If you want to select based on the actual text contents of the anchor tag then you'd need to use something like jquery.

$("a:contains('CustomerKB')").hide();

edited Oct 24 '17 at 15:01

answered Oct 24 '17 at 14:49

abney317

7,760
6
32
56

@abey317 but this will select links i want them to appear .. – John John Oct 24 '17 at 14:50
OP wants to hide link based on text inside them; not based on any attribute value. – Mohammad Usman Oct 24 '17 at 14:50
Ah yeah I see. You can't do that without javascript – abney317 Oct 24 '17 at 14:53
@abney317 ok now i tried this css `a.breadcrumbNode[href*="RootFolder=/kb/CustomerKB"] { display:none; }` but it did not hide the link!! – John John Oct 24 '17 at 14:57
Try with `a.breadcrumbNode[href*="RootFolder=%2Fkb%2FCustomerKB"] { display:none; }` – abney317 Oct 24 '17 at 15:00
@abney317 `a.breadcrumbNode[href*="RootFolder=%2Fkb%2FCustomerKB"] { display:none; } ` worked well – John John Oct 24 '17 at 15:02

how i can select then hide link based on its text

2 Answers2