Question

我发现，在所有Premium帖子中，它们都使用带有class ="svgIcon-use"

的元素

<svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 0 0-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 0 0-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 0 0-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 0 0 .26-.19l1.2-3.52z"></path></svg>

是否可以定位和隐藏帖子容器...

<article class="extremePostPreview u-marginBottom48 uiScale uiScale-ui--small uiScale-caption--small"></article>

孩子上有<svg class="svgIcon-use">吗？

Answer 1

如果您愿意使用jQuery，则可以使用其closest()运算符来简化操作。

$(".svgIcon-use").each((i, e) => {
  $(e).closest("article").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<article>
  This one stays
</article>
<article>
  Hide this one
  <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 0 0-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 0 0-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 0 0-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 0 0 .26-.19l1.2-3.52z"></path></svg>
</article>

编辑：

现在大多数浏览器都支持本机closest()功能，因此这里使用的是纯JavaScript

document.querySelectorAll('.svgIcon-use').forEach(e => {
    e.closest("article").style.display = 'none';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<article>
  This one stays
</article>
<article>
  Hide this one
  <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 0 0-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 0 0-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 0 0-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 0 0 .26-.19l1.2-3.52z"></path></svg>
</article>

Answer 2

在浏览“中型”页面时，将以下代码复制并粘贴到控制台中。解决方案使用纯javaScript。它将隐藏所有高级文章：

var premiumShit = document.body.querySelectorAll(".streamItem");
for(var counter = 0; counter < premiumShit.length; counter++){
    if(premiumShit[counter].innerHTML.includes("M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 0 0-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 0 0-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 0 0-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 0 0 .26-.19l1.2-3.52z")){
        premiumShit[counter].style.opacity = "0"; premiumShit[counter].style.height = "0"
    }
}

这个想法是迭代每个文章元素。如果它在文章的innerHTML中找到一个充满数字的长字符串（这是您告诉我们的SVG star元素的路径），则它将将该元素的不透明度设置为0，并将其高度设置为0（不请使用“ display：none”，因为使用该页面时，页面会加载更多文章；而应使用不透明度和高度）

我知道此解决方案是一个肮脏的解决方案，但是，嘿：无论SVG有多少父母，而且不需要jQuery，它都是唯一可行的解决方案。总而言之，这是一个始终有效的解决方案。

编辑：很遗憾，如果您向下滚动页面，则不会加载新文章，因此每次您要查看更多文章时都必须重新加载页面（并再次复制粘贴代码）在JavaScript控制台中，但它已经在JavaScript控制台的内存中，因此您只需单击键盘上的向上箭头键一次即可。

Answer 3

如果您必须使用普通的javascript，则假定“文章”是“ svg”的直接父代，以下方法可能对您有用

以下是示例：https://codepen.io/anon/pen/LJzQex

Answer 4

仅使用CSS是不可行的。使用Javascript隐藏，可以完成父节点。

function hideThem() {
  const elements = document.getElementsByClassName("svgIcon-use");
  for (element of elements) {
    element.parentNode.style.display = "none";
  }
}

article,
div {
  width: 50px;
  height: 50px;
  background-color: lightgreen;
  border: solid thin #eee;
}

<article>
  <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 0 0-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 0 0-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 0 0-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 0 0 .26-.19l1.2-3.52z"></path></svg>
</article>

<div>
  <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 0 0-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 0 0-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 0 0-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 0 0 .26-.19l1.2-3.52z"></path></svg>
</div>

<button onclick="hideThem()">Click me</button>

生病Medium.com高级内容。我可以隐藏针对具有特定类的元素的父元素的高级帖子吗？

4 个答案: