Ability to remove DOM element instead of hiding? #2252

kasper93 · 2016-12-19T17:44:26Z

I know that it is canonical way to hide blocked elements. But sometimes it might be useful to actually remove DOM element. At least I don't have any other idea for the following testcase.

Go to http://www.wykop.pl/
Switch view mode to "grid". (button on right hand side - marked with red circle on screenshot)
You will see that ads are properly hidden, but this leave blank items in grid. When I manually remove hidden element, grid is properly shown - without blank spaces.

To reproduce those filters are needed.

wykop.pl##li.link:has(a[href*='wykop.pl/reklama'])
wykop.pl##li.link:has(a[href*='wykop.pl/paylink'])
wykop.pl##li.link:has(a[href*='wykop.pl/market'])
wykop.pl##li.link:has(.adsbygoogle)

Any ideas how we can work this out? I know leftovers are not that bad, but still would be nice if we could remove them :)

The text was updated successfully, but these errors were encountered:

kasper93 · 2016-12-19T18:43:20Z

Also quite similar issue is with ul#dyingLinksBox thing. It is a list of some links. First one sometimes is advert. But you have arrow buttons to go through the list.

The advert is hidden with the same filters I posted in first post. I can in fact show the non-ad element with wykop.pl##.dying-links.link:nth-of-type(2):style(display:list-item;!important) but their JS go through all children of ul#dyingLinksBox and set display: none; or display: list-item so if we go back to the ad we lost the arrow buttons. Best way would be to remove the element. Not sure it is something we can expect uBlock to do. I always used user.js but since uBlock is so powerful it kind of don't make sense anymore except few minor issues.

EDIT:
Here is the filter which in theory should show first not hidden by uBlock element in #dyingLinksBox when all element are hidden. But it doesn't work. xpath works as expected, but uBlock doesn't inject the style. Probably because the filter is evaluated too soon? Or it just doesn't work with xpath.

wykop.pl##:xpath(//ul[@id='dyingLinksBox'][count(descendant::li[not(contains(@style,'display:none'))][not(string-length(@hidden)=0)]) = 0]/li[not(@hidden)][1]):style(display:list-item;!important)

Hrxn · 2016-12-20T10:37:58Z

What did you mean by manually removing the hidden element? Do you use some userscript / userscript extension? Or manually from the console, etc. ?

lewisje · 2016-12-20T15:51:13Z

He has explained why he won't do it already: #2211 (comment)

gorhill · 2016-12-20T15:55:07Z

uBlock doesn't inject the style

Because the :style operator currently works only with plain CSS selectors, not procedural ones. uBO uses the CSS selector to create a CSS rule, which of course won't work for procedural selectors (:matches-css, :has, etc.)

kasper93 · 2016-12-20T17:50:06Z

What did you mean by manually removing the hidden element? Do you use some userscript / userscript extension? Or manually from the console, etc. ?

I think it doesn't really matter how I did that. Anyway I used to use my script for a long time. Back in the day most things was not possible to hide with adblock like addons. https://github.com/kasper93/userscripts/blob/master/UkryjWykopPoleca.user.js Recently I decided to port it to uBlock filters. And only three issues are remaining.

Leftover space from hidden elements.
dyingLinksBox thingy.
$("body").removeClass("screening"); They have fullpage ads sometimes and ad itself is hidden with wykop.pl##a[href*="wykop.pl/tracker"] but there are some css being applied to body for example whole body width is lower.

While I agree 2 and 3 might be out of the scope for uBlock. I think 1 is something we can discuss further, what do you think?

Anyway don't consider this issue to be request for a feature, I simply want to signalize problems I encountered. Maybe we find some solutions :)

lewisje · 2016-12-20T18:42:58Z

If the "leftover space" is caused from the page deliberately making some part of it less than full-width or full-height ("pulling in", as opposed to having other content "push in"), then it's outside the scope of uBlock Origin.

lewisje · 2017-01-16T03:45:39Z

I already linked to the comment where @gorhill explains why he won't do it, but thanks for explaining DOM Manipulation 101 to us.

gorhill · 2017-04-23T16:00:27Z

@lewisje About your comment at https://adblockplus.org/forum/viewtopic.php?f=10&t=52321:

uBlock Origin has implemented this with different syntax

uBO does override inline styles with display: none !important; by default, there is no need for users to worry about this.

For example, uBO works fine with http://raymondhill.net/ublock/adbox.html -- where one element to hide uses style="display: block !important".

chylex · 2017-05-01T12:24:57Z

@gorhill You said you wanted real world cases for removing elements - if you use uBlock on a video element, it just hides it while it keeps autoplaying in the background when you reload the page. I'd appreciate a way to force these elements out of the DOM instead of blocking an element thinking it was gone, and several days later getting jumpscared by invisible videos..

gorhill · 2017-05-01T12:29:50Z

"Real world cases" means actual URLs where I can see for myself what can be done .

chylex · 2017-05-01T12:32:24Z

Here's an example rule that kept autoplaying the video trailer on the site:

! 18. 12. 2016 15:24:08 http://www.metacritic.com/game/pc/overwatch
www.metacritic.com##.video_and_autoplay

gorhill · 2017-05-01T12:39:09Z

Blocking large media elements would work for that case. (which is even better than a cosmetic filter since the bandwidth is saved).

chylex · 2017-05-01T12:43:07Z

Blocking large media elements does nothing here http://www.digitaltrends.com/mobile/phone-unlocking-guide-for-all-carriers/

or here http://www.pcworld.com/article/2691193/do-the-research-before-you-upgrade-your-ram.html

gorhill · 2017-05-01T12:44:32Z

Works for me. What your threshold for the size? It's 250 KB here.

chylex · 2017-05-01T12:48:28Z

50 kB, only turning it on for individual websites. Both sites still load and autoplay the videos - http://i.imgur.com/Mm0UCxw.png. Using Firefox Developer Edition 54.0a2, 64bit.

It also doesn't solve a case where you'd only want some videos to play, for example blocking twitch's mini player but not blocking the main player (you can do this in twitch settings, but just as an example).

gorhill · 2017-05-01T13:15:25Z

Ok the video is delivered differently on Firefox -- the page is using xhr requests.

gorhill · 2017-05-14T04:04:48Z

Here is another case: #2609. The page keep changing the style attribute non-stop to evade cosmetic filtering's display: none !important;.

kasper93 · 2017-05-16T20:35:46Z

Another case where hiding leave blank space. When node is removed layout is properly calculated.

https://userstyles.org/styles/browse

chylex · 2017-07-05T11:56:33Z

Any update on this? Another website where blocking media doesn't work, at least in FF - http://www.zdnet.com/article/max-memory-limits-for-64-bit-windows-7/

gorhill · 2017-07-05T12:00:46Z

blocking media doesn't work

||ipad-streaming.techrepublic.com/media$domain=zdnet.com

chylex · 2017-10-06T19:47:13Z

Blocking <style> elements (obviously) doesn't work, on websites that use style elements to display ads with random IDs and base64 images purely in CSS (making it also impossible to hide the elements themselves) - example. Is properly removing elements going to be implemented?

gorhill · 2017-10-06T19:54:35Z

example

I don't see any ads on that page.

chylex · 2017-10-06T20:07:19Z

okiehsch · 2017-10-06T20:21:49Z

Already fixed by the filter
teamliquid.net##script:inject(abort-on-property-write.js, adonisHash)
in uBO-filters

vparitskiy · 2017-11-14T11:35:12Z

http://sport.ua/

Nice example why removing elements instead oh hiding would be helpful.

They use js to detect hidden state and override it which causes constantly dom changes. Or something like that.

http://gifly.com//media_gifly/t/l/J/h/b/tlJh.gif

gorhill · 2017-11-14T11:59:07Z

Try:

sport.ua##script:inject(abort-current-inline-script.js, parseInt, 676574456c656d656e747342795461674e616d65)

slackero · 2017-11-26T17:22:39Z

It would make sense these days to remove specific filtered elements from DOM instead of just hiding. Here is such an example.

My filter: www.spiegel.de##.autostartvideo is hiding the element but video still is autoplaying.

I cannot find any working solution for this specific problem. Cosmetic filters are not enough.

gorhill · 2017-11-26T17:38:18Z

My filter: www.spiegel.de##.autostartvideo is hiding the element but video still is autoplaying.

That is a good pro-argument.

ThePickNick · 2018-01-12T16:47:16Z

I have found couple more examples where Video blocking via UBlock Orgin picker only hide the video the video is set on autoplay, and you can still hear the sound. major News sites in particularity incorporate this feature. Only way to get rid of video is to delete video element from the DOM

http://www.cnn.com/2018/01/12/us/southern-california-mudslides/index.html

mine filter
www.cnn.com###large-media does block the video but sound still plays same issue with these sites

http://fortune.com/video/2018/01/11/lyft-made-a-beer-that-comes-with-discounted-rides/

filter used
fortune.com##.rendered.sticky-video.auto-play.lead-media.autoplay.no-custom-bc-overlay.full-width-media.video.component

there needs to be a function to delete elements from DOM instead of just adding style="display: none !important;"

Hrxn · 2018-01-13T16:21:04Z

Works with HTML filtering.

gorhill · 2020-03-04T15:28:11Z

Another case: uBlockOrigin/uAssets#7056.

*** New procedural cosmetic operator: `:remove()` Related issue: - #2252 The purpose is to outright remove elements from the DOM tree. Since `:remove()` is an "action" operator, it must only be used as a trailing operator (just like the `:style()` operator). AdGuard's cosmetic filter syntax `{ remove: true; }` will be converted to uBO's `:remove()` operator internally. *** New procedural cosmetic operator: `:upward(...)` The purpose is to lookup an ancestor element. When used with an integer argument, it is synonym of `:nth-ancestor()`, which will be deprecated and which will no longer be supported once no longer used in mainstream filter lists. Filter lists maintainers must only use `:upward(int)` instead of `:nth-ancestor(int)` once the new operator become available in all stable releases of uBO. `:upward()` can also accept a CSS selector as argument, in which case the nearest ancestor which matches the CSS selector will be selected.

New procedural cosmetic operator: `:remove()` Related issue: - gorhill/uBlock#2252 The purpose is to outright remove elements from the DOM tree. Since `:remove()` is an "action" operator, it must only be used as a trailing operator (just like the `:style()` operator). AdGuard's cosmetic filter syntax `{ remove: true; }` will be converted to uBO's `:remove()` operator internally. *** New procedural cosmetic operator: `:upward(...)` The purpose is to lookup an ancestor element. When used with an integer argument, it is synonym of `:nth-ancestor()`, which will be deprecated and which will no longer be supported once no longer used in mainstream filter lists. Filter lists maintainers must only use `:upward(int)` instead of `:nth-ancestor(int)` once the new operator become available in all stable releases of uBO. `:upward()` can also accept a CSS selector as argument, in which case the nearest ancestor which matches the CSS selector will be selected. Co-authored-by: gorhill <585534+gorhill@users.noreply.github.com>

ktoś może zerknąć na: gorhill/uBlock#2252 gorhill/uBlock#2810 czy filtr nie zakłóca logiki = ja widzę tylko FB i X.

gwarser mentioned this issue Sep 21, 2017

Is there a function to change the name of an element in DOM? #3045

Closed

gorhill closed this as completed in uBlockOrigin/uAssets@0c2384a Nov 14, 2017

gorhill reopened this Nov 14, 2017

gorhill mentioned this issue Dec 21, 2017

unblockable ads #3363

Closed

KonoromiHimaries mentioned this issue Feb 25, 2018

Make load-on-demand smarter for blocked large media elements #1390

Closed

krystian3w mentioned this issue Oct 30, 2018

cooking.nytimes.com uBlockOrigin/uAssets#3708

Closed

gorhill mentioned this issue Apr 11, 2019

iframe with src="javascript:false;" defies filters uBlockOrigin/uBlock-issues#522

Closed

8 tasks

gorhill closed this as completed Mar 9, 2020

krystian3w added a commit to FiltersHeroes/PolishSocialCookiesFiltersDev that referenced this issue May 5, 2024

Update specyficzne_ukrywajace.txt

b892394

ktoś może zerknąć na: gorhill/uBlock#2252 gorhill/uBlock#2810 czy filtr nie zakłóca logiki = ja widzę tylko FB i X.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ability to remove DOM element instead of hiding? #2252

Ability to remove DOM element instead of hiding? #2252

kasper93 commented Dec 19, 2016 •

edited

kasper93 commented Dec 19, 2016 •

edited

Hrxn commented Dec 20, 2016

lewisje commented Dec 20, 2016

gorhill commented Dec 20, 2016 •

edited

kasper93 commented Dec 20, 2016

lewisje commented Dec 20, 2016

lewisje commented Jan 16, 2017

gorhill commented Apr 23, 2017

chylex commented May 1, 2017

gorhill commented May 1, 2017

chylex commented May 1, 2017

gorhill commented May 1, 2017 •

edited

chylex commented May 1, 2017 •

edited

gorhill commented May 1, 2017

chylex commented May 1, 2017

gorhill commented May 1, 2017

gorhill commented May 14, 2017 •

edited

kasper93 commented May 16, 2017

chylex commented Jul 5, 2017 •

edited

gorhill commented Jul 5, 2017

chylex commented Oct 6, 2017

gorhill commented Oct 6, 2017

chylex commented Oct 6, 2017

okiehsch commented Oct 6, 2017

vparitskiy commented Nov 14, 2017 •

edited

gorhill commented Nov 14, 2017

slackero commented Nov 26, 2017

gorhill commented Nov 26, 2017

ThePickNick commented Jan 12, 2018

Hrxn commented Jan 13, 2018

gorhill commented Mar 4, 2020

Ability to remove DOM element instead of hiding? #2252

Ability to remove DOM element instead of hiding? #2252

Comments

kasper93 commented Dec 19, 2016 • edited

kasper93 commented Dec 19, 2016 • edited

Hrxn commented Dec 20, 2016

lewisje commented Dec 20, 2016

gorhill commented Dec 20, 2016 • edited

kasper93 commented Dec 20, 2016

lewisje commented Dec 20, 2016

lewisje commented Jan 16, 2017

gorhill commented Apr 23, 2017

chylex commented May 1, 2017

gorhill commented May 1, 2017

chylex commented May 1, 2017

gorhill commented May 1, 2017 • edited

chylex commented May 1, 2017 • edited

gorhill commented May 1, 2017

chylex commented May 1, 2017

gorhill commented May 1, 2017

gorhill commented May 14, 2017 • edited

kasper93 commented May 16, 2017

chylex commented Jul 5, 2017 • edited

gorhill commented Jul 5, 2017

chylex commented Oct 6, 2017

gorhill commented Oct 6, 2017

chylex commented Oct 6, 2017

okiehsch commented Oct 6, 2017

vparitskiy commented Nov 14, 2017 • edited

gorhill commented Nov 14, 2017

slackero commented Nov 26, 2017

gorhill commented Nov 26, 2017

ThePickNick commented Jan 12, 2018

Hrxn commented Jan 13, 2018

gorhill commented Mar 4, 2020

kasper93 commented Dec 19, 2016 •

edited

kasper93 commented Dec 19, 2016 •

edited

gorhill commented Dec 20, 2016 •

edited

gorhill commented May 1, 2017 •

edited

chylex commented May 1, 2017 •

edited

gorhill commented May 14, 2017 •

edited

chylex commented Jul 5, 2017 •

edited

vparitskiy commented Nov 14, 2017 •

edited