Remove

Check that remove functionality is working as expected.

Remove with ID selector

Test that a remove filter using an ID 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

abptestpages.org###remove-id {remove: true;}

Remove with ID selector with double curly braces

Test that a remove filter using an ID selector with two curly braces 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

abptestpages.org##div[id='{{remove-id}}'] {remove: true;}

Remove with class selector

Test that a remove filter using a class 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

abptestpages.org##.remove-class {remove: true;}

Remove with descendant selector

Test that a remove filter using a descendant 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

abptestpages.org##.testcase-area > .remove-descendant {remove: true;}

Remove with sibling selector

Test that a remove filter using a sibling selector removes its target.

Example Content

Target

Target removed

Steps

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

Filters

abptestpages.org##.testcase-examplecontent + .remove-sibling {remove: true;}

Remove with attribute selector 1

Test that a remove filter using an attribute 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

abptestpages.org##div[height="40"][width="40"] {remove: true;}

Remove with attribute selector 2

Test that a remove filter using an attribute 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

abptestpages.org##div[href="http://testcase-attribute-remove.com/"] {remove: true;}

Remove with attribute selector 3

Test that a remove filter using an attribute 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

abptestpages.org##div[style="width: 42px;"] {remove: true;}

Remove starts with selector 1

Test that a remove filter using a starts with 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

abptestpages.org##div[href^="http://testcase-startswith-remove.com/"] {remove: true;}

Remove starts with selector 2

Test that a remove filter using a starts with 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

abptestpages.org##div[style^="width: 43px;"] {remove: true;}

Remove ends with selector 1

Test that a remove filter using a ends with 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

abptestpages.org##div[style$="width: 44px;"] {remove: true;}

Remove contains

Test that a remove filter using a contains 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

abptestpages.org##div[style*="width: 45px;"] {remove: true;}