Удалите / (textnode) из Gistub Gist списков, используя CSS или Javascript

Question

Я пытаюсь удалить значения username и / из списков гистов в Github Gists, проблема в том, чтонет классов / идентификаторов или селектора для значения /.

Вот HTML-код и ссылка на страницу Gists Github и 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>

Список Github Gists

DEMO на JSFiddle

Я могу удалить значок и имя пользователя с кодом ниже:

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

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

Но / не имеет классов и выглядит как узел / # textnode?Как я могу получить доступ к этому?

Answer 1

Насколько я знаю, здесь нет селектора CSS для текстового узла.Но чтобы скрыть /, вы можете установить для font-size значение 0px.

Таким образом, решение CSS (хотя и не лучшее, поскольку мы полагаемся на структуру dom, чтобы не изменять)

.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;
}

Другой вариант - использовать Javascript,

Проблема в том, что вам придется ждать загрузки DOM.Поэтому будет краткий период, когда ваши изменения не будут применены.

Кроме того, вы по-прежнему полагаетесь на то, что имя файла является последним элементом привязки в родительском контейнере, если только вы не используете Regex для извлечения сущности.url (жертвуя некоторой производительностью здесь) или вы знаете имя пользователя

Например, если имя пользователя остается прежним

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