Search code examples
javascriptjquerycssgreasemonkeyuserscripts

Javascript / Greasemonkey / Userscript.js identify element and remove one of many classes

I've spent far too many hours trying to figure this out and as JavaScript is not my primary language and not yet a jQuery guru I've determined I need to ask for help.

In a case where a generated page has a structure where it has a DIV for some odd reason no ID, multiple non-standard data tag attribute tags, but at least standard style CLASS assignment....however...it has been assigned MULTIPLE classes.

Now, just one of those style classes is such that it has a code event associated that I want to neuter and leave all other classes still assigned. What I've tried there (this list is far from complete I have tried many things):

document.getElementsByClassName('Goodclass01')[0].remove('BADCLASS');
document.querySelectorAll('[data-tag-one="["value", 
"value"]"]').remove('BADCLASS');

Various jnode calls that all fail due to claims of being unknown
A couple variations of something referred to as the "location hack" none of 
which I could get to work but may have very well have been user error.

Safewindow attempt to just replace BADCLASS javascript function all together 
but not ideal explained below.

Here is an example of the kind of structure of the target:

<div id="main">
  <div class="main_content" data-tag-id="12345">Some stuff sits above</div>
  <a href="SOME LINK" class="Goodclass01 Goodclass02 Goodclass03 BADCLASS" 
  data-tag-one="["value", "value"]">
</div>

In this example there is a javascript function that fires upon clicking the href link above due to the function being associated with BADCLASS style assignment. So, from lots of searching it seemed like I should be able to grab that DIV by any of the initially assigned classes (since there is unfortunately not a class ID which would make it very easy) but then reassign the list of classes back minus the BADCLASS at page load time. So, by the time the user clicks the link, the BADCLASS has been removed to look like this:

<div id="main">
  <div class="main_content" data-tag-id="12345">Some stuff sits above</div>
  <a href="SOME LINK" class="Goodclass01 Goodclass02 Goodclass03" 
  data-tag-one="["value", "value"]">
</div>

I also read that simply using unsafewindow to replace the BADCLASS javascript function could be possible, so I am open to hearing one of you gurus help with how easy (or hard) that would be. In a case where BADCLASS could be shared function code perhaps called by another element on the page still having that initial class that perhaps we desire to continue to function which is why if it is only a single element that needs to be altered, I would rather just change this one href div.

Hope the explanation makes sense and what is probably a laughable simple example above for the Javascript gurus so forgive me but your help is greatly appreciated and will save more hair pulling! :)

EDIT: This must work above all in Chrome browser!

Solution

  • Got it with the help of both of the clear, awesome correct answers below that literally came in within seconds of each other and only a few min after my post, so thanks to both @Tiny and @Damian below!

    I'm upvoting both as they both listed the same correct jQuery answers, and Tiny also provided the pure JS.

    I am posting the full answer below because without the other steps, with Tamper/Greasemonkey neither will produce the desired results.

    First, Tamper/Greasemonkey do not load jQuery by default, so it is just easy as add @require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.mi‌​n.js to your current script and also put this.$ = this.jQuery = jQuery.noConflict(true); to avoid any versioning conflicts.

    Also, in this case unfortunately I HAD to change my TamperMonkey header to:

    // @run-at    document-idle

    along with the above mentioned:

    // @require  http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

    and begin the script with:

    this.$ = this.jQuery = jQuery.noConflict(true);

    and finally the primary accepted/best answer in this case of:

    $('.Goodclass01').removeClass('BADCLASS');

    NOTE: The above @run-at line is required, and since so many (all) of my current Tamper/Greasemonkey scripts are actually set by default to run at START, this is of importance as it means functions like this must be separated to their own scripts to run instead AFTER the page loads (idle). Once this is added, even the above pure JS answer from Tiny did in fact produce the desired result.

    As the simplest one-line answer that I was hoping was possible in Javascript, as it is so many other languages in a single line of code. I've used it in the past, but was not aware of this particular removeClass method.