Filters: block li which has a specific image within it?

Everything about using Adblock Plus on Mozilla Firefox, Thunderbird and SeaMonkey
Post Reply
tharsos
Posts: 1
Joined: Wed May 31, 2017 8:41 pm

Filters: block li which has a specific image within it?

Post by tharsos »

Does anyone know if there is a way to block a whole li which contains an image with the class="skill-tree-skill-medal" attribute within it? Alternatively is there a way to block the li based on the image name it contains such as medal-tiny.png? If not, would anyone recommend any other software to do it?


<li class="skill-tree-skill-node" data-skill="2002012530">
<span data-skill="2002012530" title=""></span><a href="/math/reception/top-and-bottom" class="skill-tree-skill-link" data-skill="2002012530" >
<span class="skill-tree-skill-number" >F.6</span>
<span class="skill-tree-skill-name">Top and bottom</span></a>
<span class="skill-tree-skill-score"> (100) <img src="/dv/INQKse89tMoPdLsHsEhvO7NPVM8/yui3/awards/assets/gameboard/medal-tiny.png" alt="Medal" title="" class="skill-tree-skill-medal"></span>
</li>

I tried uk.ixl.com##li[class*="skill-tree-skill-medal"] but the problem is that the li does not have the "skill-tree-skill-medal" class, but rather the image has it.
User avatar
Gingerbread Man
Posts: 1339
Joined: Fri Aug 12, 2011 5:28 am

Re: Filters: block li which has a specific image within it?

Post by Gingerbread Man »

You can do this with Greasemonkey (for Firefox) or Tampermonkey (for Chrome) plus a user script. For an example of what such a script looks like, see Rarbg - remove sponsored results.

Based on the above, here's what should work for your situation:

Code: Select all

// ==UserScript==
// @name        Ixl.com - remove li with specific descendant img
// @namespace   http://forums.mozillazine.org/memberlist.php?mode=viewprofile&u=261941
// @author      Gingerbread Man
// @description Removes li elements that have img.skill-tree-skill-medal descendants.
// @include     http*://*.ixl.com/*
// @version     1.0
// @grant       none
// @license     http://creativecommons.org/licenses/by-sa/4.0/
// ==/UserScript==

var links = document.querySelectorAll('li img.skill-tree-skill-medal');
if (links.length > 0) {
  for (i = 0, j = links.length; i < j; i++) {
    var eachrow = links[i].parentNode.parentNode;
    eachrow.parentNode.removeChild(eachrow);
  }
}
For technical reasons, Adblock Plus can't filter elements based on their descendants. It would require the CSS subject selector, and as far as I know, no browser is close to implementing that.
User avatar
mapx
Posts: 21940
Joined: Thu Jan 06, 2011 2:01 pm

Re: Filters: block li which has a specific image within it?

Post by mapx »

Gingerbread Man wrote: For technical reasons, Adblock Plus can't filter elements based on their descendants. It would require the CSS subject selector, and as far as I know, no browser is close to implementing that.
work in progress:
https://issues.adblockplus.org/ticket/3143

uBo / adguard already implemented such feature
Post Reply