使用 CSS 或 Javascript 从 Github Gist 列表中删除 / (textnode)答案

【问题标题】：Remove / (textnode) from Github Gist lists using CSS or Javascript使用 CSS 或 Javascript 从 Github Gist 列表中删除 / (textnode)
【发布时间】：2019-04-06 00:52:43
【问题描述】：

我正在尝试从 Github Gists 中的 gist 列表中删除 username 和 / 值，问题是没有可用于 / 值的类/ID 或选择器。

这是 HTML 和 Github Gists 页面和 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

我可以使用以下代码删除图标和用户名：

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

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

但是 / 没有任何类并且似乎是一个节点/#textnode？我怎样才能访问它？

【问题讨论】：

标签： javascript html css custom-data-attribute

【解决方案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 获取 gist url（在此处牺牲一些性能）或者您知道用户名

例如，如果用户名保持不变

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

【讨论】：