Add a function to remove nodes from DOM tree
The standard way how cosmetic filters work, is to hide elements. But in some cases, it could be useful to remove the node from DOM tree rather than just hiding it.
1.) In this site: https://www.rd.fi/ there is an annoying slider element called .nivoSlider
. I can hide it via rd.fi##.nivoSlider
, but that element is still working and acting in the background despite it's hidden, changing slides and unnecessarily using resources. You can see this if you open your browser dev tools. If this element would be removed instead of hiding, it would obviously stop doing anything.
2.) This site https://responsivevoice.org/?post_type=post has a big, annoying full screen announcement:
That pops up pretty soon as the page is loaded. It also locks your scrolling. If I hide that announcement via responsivevoice.org##.cp-modal-popup-container
I don't see it anymore, but after refreshing the page and scrolling the page up and down for ~30 - 60 secs, that announcement will try to appear again. It doesn't appear because it's hidden, but it will still lock your scrolling (see how scrolling bar is not there anymore, it was removed when I was in the middle of the page):
So hiding it is not enough. But if that element is removed from DOM tree, it won't appear nor it will lock your scrolling.
Removing an element from a DOM tree is something that uBO and AG support as well:
https://github.com/gorhill/uBlock/wiki/Static-filter-syntax#subjectremove
uBO syntax:
example.org##.foo:remove()
AG syntax:
example.org#$?#.foo { remove: true; }
uBO's internal filters use this 23 times, AG's base filters use 70 times.