We have all experienced some element displayed on a webpage that didn’t quite sit well with us, whether it was an ad or some content wall requiring pay or survpay—payment in the form of survey completion (a fate often worse than actual payment). Thanks to browser developers keeping other developers in their thoughts, anyone who has updated their Firefox and Chrome browsers in the last half decade has access to this solution. So what I’m writing about here is manipulating HTML/XHTML/XML elements after they’re interpreted and rendered by your browser. But before I lose anyone, let me reassure that anyone can do this simply with a couple of right and left clicks in a matter of seconds with little understanding.
Note: Since deleting elements simply deletes them from your browser’s display to you, any changes can be easily reverted by reloading the webpage. No harm, no foul. Few developers check for deleted elements and I have never encountered any sort of user-punishment from the few that do. Keep in mind, any server-side logic such as requiring (as opposed to suggesting) login will not be able to be bypassed using this method if server-side logic is keeping you from accessing content.
DOM Structure
By now all browsers support the standard conventional representation of objects in HTML/XHTML/XML documents—the Document Object Model or DOM for short. So when you visit a webpage, your browser downloads the HTML, parses the HTML and organizes the elements that make up the document as nodes in a tree structure. The tie-in here is that you can delete these nodes and therefore delete them from your viewing. Nearly everything you view on a webpage is an element or series of elements, from the ‘Submit’ button to the annoying ad banner to the login form, all elements that get constructed as nodes.
Firefox and Chrome Element Inspector
Firefox and Chrome both have developer tools which can be accessed by right-clicking and selecting ‘Inspect Element’ or the hotkeys Ctrl+Shift+I. If you use the right-click option it will highlight the node corresponding to the element you clicked on. Simply hover over the highlighted text, right-click and select ‘Delete Node’. Below is an example of the navigation in Firefox, sharing a similar layout to Chrome. The tools can be closed by the ‘X’ I have highlighted or by using the hotkey again.
Me about to delete the node allowing me to write this post
Applying This To Blocks, Ads and Ethics
This will remain a rather simple but useful rudimentary solution that’s good to keep in your tool belt as a browser user. For instance it can also be used to save pictures that you are prevented from saving via right-click options menu.Hopefully I have explained this out in such a way that its uses require little imagination. I consider content walls the ultimate ‘gotcha’, bait and switch. It’s also rather quick and painless to do and is certainly a worthy way to closing any malicious pop-ups without having to worry about accidentally clicking on them.
While I understand the importance of ads and don’t condone closing them all, this is useful for closing annoying banner ads when streaming or otherwise recording your screen as well. And as far as anyone is concerned, you have to look at the ad to delete it so technically in the end they inevitably still win.
That being said, be sure to check out my upcoming post where I discuss blocking ads universally at their source using the hosts file as well as other solutions.