How can I permanently remove element from every webpage?

Question

I am running Safari, on a Mac with OSX El Capitan and I want a way to permanently remove an element from every webpage in a domain.

I do not want a temporarily make changes. I would like my answer to work in Safari, I have to say this twice because stupid editors and other users are continuing to point me to un-applicable solutions for firefox here.

i.e. https://www.google.com/search?num=100&client=safari&rls=en&q=test&oq=test still has the same element blocked as https://www.google.com/

I am aware of extensions that do it for Firefox - "Remove It Permanently" and "Yet Another Remove It Permanently" - but is there any way to do this in Safari, or would an extension have to be made to accomplish this task?

Are you using Mac or Windows? Bcoz safari in PC is different from safari on Mac OS. Read [creating extension on safari](https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/Introduction/Introduction.html). You could inject javascript/css to do the element removals. BTW: Downvote: NOT ME. ;) — Lucky, Oct 09 '15 at 20:59
Possible duplicate of [Understanding CSS for user styling in a browser](http://superuser.com/questions/234952/understanding-css-for-user-styling-in-a-browser) — user193661, Oct 10 '15 at 01:00
Not a possible duplicate as it is addressing a different browser. That is actually in the first line of the question if you would bother to read it. — Whitecat, Oct 11 '15 at 03:31

Whitecat · Accepted Answer · 2015-10-10T04:54:55.547

One way to do it is use an extension that allows scripts to be added to a webpage.

I used the extension Quickscript for Safari. I created the following script to run and delete by classname every time I open the webpage:

removeElementsByClass('<className to delete>');

function removeElementsByClass(className){
    var elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

Another way is to delete by item id.

removeElementsById('<id to delete>');

function removeElementsById(id){
    var elements = document.getElementById(id);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

This can also be accomplished by creating a function using jquery.

removeElementsById('#<id to delete>');
removeElementsByClass('.<className to delete>');

function removeElementsByClass(className){
    $(className).remove();
}
function removeElementsById(id){
    $(id).remove();
}

Note: This solution is browser and OS independent. It only requires you find an extension that allows you to run scripts on websites.

Custom JavaScript for websites will work with chrome.

How can I permanently remove element from every webpage?

1 Answers1

Linked