Remove / (textnode) from Github Gist lists using CSS or Javascript

问题

I am trying to strip the username and / values from lists of gists within Github Gists, the problem being there are no classes/ids or a selector available for the / value.

Here is the HTML and link to Github Gists page and JSFiddle:

<div class="d-inline-block">
    <span>
        <a data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=167012" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
            href="/hanachin">hanachin</a>
        /
        <a href="/hanachin/2060751fca3444922386879ac666541e">
            <strong class="css-truncate-target">file0.txt</strong>
        </a>
    </span>
    <div class="text-gray" style="font-size:11px;">
        Last active
        <time-ago datetime="2019-03-08T08:24:35Z">Mar 8, 2019</time-ago>
    </div>
    <span class="f6 text-gray">
        Ruby 2.7 ref:
        <a href="https://qiita.com/hanachin_/items/1aa1ba38a87dee91aed6" rel="nofollow">https://qiita.com/hanachin_/items/1aa1ba38a87dee91aed6</a>

    </span>
</div>

List of Github Gists

DEMO on JSFiddle

I can remove the icon and username with the code below:

[data-hovercard-type="user"] {
display:none;
}

[data-hovercard-type="user"] img {
display:none;
}

But the / doesn't have any classes and appears to be a node/#textnode? How can I access this?

回答1:

As far as I know, there is no CSS selector for a text node. But to hide the / you can set its font-size to 0px.

So a CSS solution (albeit not the best since we are relying on the dom structure to not change)

.gist-snippet-meta .d-inline-block > span:first-of-type {
    font-size: 0px;
}

.gist-snippet-meta .d-inline-block > span:first-of-type > a:last-of-type {
    /* Reset font size back ot what it was before we set it to 0 on the parent */
    font-size: 14px;
}

Another option would be to use Javascript,

An issue with this is you are going to need to wait for the DOM to load. So there will be a brief period where your changes haven't applied.

Also, you are still relying on the file name being the last anchor element in the parent container, unless you either use Regex to fetch the gist url (sacrificing some performance here) or you know the username

E.g provided the username is staying the same

Array.from(document.querySelector([data-hovercard-type="user"])).forEach( e => {
    var parent = e.parentElement;
    parent.innerHTML = parent.querySelector('a[href*="hanachin/"]').outerHTML;
});

来源：https://stackoverflow.com/questions/55538567/remove-textnode-from-github-gist-lists-using-css-or-javascript

标签

javascript

html

css

custom-data-attribute