How to block div on website permanently using Chrome?

Question

There is one website that I like, but with a comment section that super annoys me. I want to block the div that holds the comments permanently, across pages, in Google Chrome.

For a temporary deletion, I can just remove the node using Chrome's Web Developer Tools. But how to remove it forever?

How can I do that? I bet Adblock does not help me, nor do good intentions. Even if I try, I end up skimming through the comments which is not good for my mental health. Hint: It's a sports website with very low-quality comments.

So here is the virtual example:

• SITE: www.sportsrumours.com
• DIV to block: <div class="comments">All annoying comments go here</div>
• The DIV is the same on all pages of www.sportsrumours.com

Answer 1

For this kind of thing, I normally recommend the Stylish Addon for chrome.

Browse to the site when you have installed teh addon and go to:

Stylish (Icon) > Manage Installed Styles > Write New Style. Give it a name and select "applies to". Give the domain of the site you want to remove the comments from and select "URLs on the domain".

use code similar to the following to hide the div:

.comments {display: none !important;}

Save, and you should notice the div is now hidden

EDIT: Stylish is now Stylus - you can download it here: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

Answer 2

You can use Adblock Plus chrome or firefox extension. When enabled, click its extension icon and then click "Block element". Then you can click an element in the page that you want blocked.

Adblock Plus will then block that element each time it is found.

Answer 3

You can use Stylebot chrome extension. After installing go to the website, open Stylebot and use the arrow-tool for selecting the DIV. Then look for Layout and visibility and click on hide. The DIV will disappear and the change will be persisted. Of course, you can undo that whenever you want.