使用CSS或Javascript从Github Gist列表中删除/（textnode） [英] Remove / (textnode) from Github Gist lists using CSS or Javascript

问题描述

我正在尝试从Github要点内的要点列表中删除 用户名 和 / 值。问题是没有可用于/值的类/标识或选择器。

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.

这是HTML并链接到Github Gists页面和JSFiddle：

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>

Github要点列表

演示在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;
}

但是/没有任何类，似乎是一个节点/ #textnode？
如何访问它？

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

推荐答案

据我所知，文本节点没有CSS选择器。但是要隐藏 / ，您可以将其 font-size 设置为 0px 。

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.

所以是CSS解决方案（尽管不是最好的解决方案，因为我们依靠dom结构保持不变）

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

另一种选择是使用Javascript

Another option would be to use Javascript,

与此有关的一个问题是，您将需要等待DOM加载。因此，在很短的一段时间内您的更改尚未应用。

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.

此外，您仍然依赖文件名作为父容器中的最后一个锚元素，除非您使用Regex来获取要点网址（在此处牺牲一些性能），否则您知道用户名

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

这篇关于使用CSS或Javascript从Github Gist列表中删除/（textnode）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！