Remove with Extended Selectors

Check that remove functionality with extended selectors is working as expected.

Basic :-abp-properties() usage with remove

Test that a remove filter using a :-abp-properties() selector removes its target.

Target

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have the red element removed, and replaced with a green element.

Filters

localhost#?#div:-abp-properties(width: 46px) {remove: true;}

Basic :-abp-has() usage with remove

Test that a remove filter using a :-abp-has() selector removes its target.

Target

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have the red element removed, and replaced with a green element.

Filters

localhost#?#div:-abp-has(>div>span.remove-abp-has) {remove: true;}

Basic :has() usage with remove

Test that a remove filter using a :has() selector removes its target.

Target

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have the red element removed, and replaced with a green element.

Filters

localhost#?#div:has(>div>span.remove-has) {remove: true;}

Basic :-abp-contains() usage with remove

Test that a remove filter using a :-abp-contains() selector removes its target.

remove-contains-target

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have the red element removed, and replaced with a green element.

Filters

localhost#?#span:-abp-contains(remove-contains-target) {remove: true;}

Basic :xpath() usage with remove

Test that a remove filter using a :xpath() selector removes its target.

Target

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have the red element removed, and replaced with a green element.

Filters

localhost#?#span:xpath(//*[@id="basic-xpath-usage-with-remove-fail"]) {remove: true;}

Basic :has-text() usage with remove

Test that a remove filter using a :-has-text() selector removes its target.

remove-has-text

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have the red element removed, and replaced with a green element.

Filters

localhost#?#span:has-text(remove-has-text) {remove: true;}

Chained extended selectors with remove

Test that a remove filter using several of the extended selectors removes its target.

Target

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have the red element removed, and replaced with a green element.

Filters

localhost#?#div:-abp-has(> div:-abp-properties(width: 47px)) {remove: true;}

Case insensitive extended selectors with remove

Test that a remove filter is case insensitive and still removes its target.

Target

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have the red element removed, and replaced with a green element.

Filters

localhost#?#div:-abp-properties(WiDtH: 48px) {remove: true;}

Wildcard in extended selector with remove

Test that a remove filter using wildcards still removes its target.

Target

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have the red element removed, and replaced with a green element.

Filters

localhost#?#.remove-wildcard:-abp-properties(cursor:*) {remove: true;}

Regular expression in :-abp-properties() with remove

Test that a remove filter using regular expressions still removes its target.

Target

Not a target

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have both the red elements removed, and replaced with green elements.

Filters

localhost#?#div:-abp-properties(/width: 13[1-5]px;/) {remove: true;}

Regular expression in :-abp-contains() with remove

Test that a remove filter using regular expressions still removes its target.

remove-containsregex1

remove-containsregex2

Target removed

Steps

Add filter #1.
Refresh page.
The DOM should have both the red elements removed, and replaced with green elements.

Filters

localhost#?#div > div:-abp-contains(/remove-containsregex\d/) {remove: true;}