Javascript/Greasemonkey/Userscript.js 识别元素并删除许多类中的一个

Question

我花了太多时间试图解决这个问题，由于 JavaScript 不是我的主要语言，也不是 jQuery 大师，我决定我需要寻求帮助。

在生成页面的结构中，出于某种奇怪的原因，它有一个 DIV，没有 ID，多个非标准数据标签属性标签，但至少是标准样式的 CLASS 分配....但是......它已分配多个类(class)。

现在，这些样式类中只有一个具有关联的代码事件，我想中性化并保留所有其他类仍然分配。我在那里尝试过的(这个列表远未完成我已经尝试了很多东西):

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.

这里是一个目标结构的例子:

<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>

在此示例中，有一个 javascript 函数会在单击上面的 href 链接时触发，因为该函数与 BADCLASS 样式分配相关联。因此，通过大量搜索，我似乎应该能够通过任何最初分配的类来获取该 DIV(因为不幸的是没有一个类 ID 会使它变得非常容易)，然后重新分配类列表减去页面加载时的 BADCLASS。因此，当用户单击链接时，BADCLASS 已被删除，如下所示:

<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>

我还读到，简单地使用 unsafewindow 来替换 BADCLASS javascript 函数是可能的，所以我愿意听到你们中的一位专家帮助说明这将是多么容易(或困难)。在 BADCLASS 可以共享函数代码的情况下，该函数代码可能被页面上的另一个元素调用，该元素仍然具有我们希望继续运行的初始类，这就是为什么如果它只是一个需要更改的元素，我宁愿只需更改这个 href div。

希望这个解释是有道理的，对于 Javascript 专家来说，上面可能是一个可笑的简单示例所以请原谅我，但非常感谢您的帮助，并且会节省更多的麻烦! :)

编辑:这必须首先在 Chrome 浏览器中工作!

Answer 1

从所有元素中删除类

如果您想从所有具有该类的元素中删除该类，只需选择所有具有该类的元素并从其类列表中删除该类。

[...document.querySelectorAll('.BADCLASS')]
    .forEach(e => e.classList.remove('BADCLASS'));

const elements = [...document.querySelectorAll('.BADCLASS')];
elements.forEach(e => e.classList.remove('BADCLASS'));
console.log(elements);

<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"]'>link</a>
</div>

使用 jQuery:

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

const elements = $('.BADCLASS');
elements.removeClass('BADCLASS');
console.log(elements);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"]'>link</a>
</div>

从元素的子集中移除类

如果您只想从子集元素中删除类，请从类列表中的类中选择这些元素。

[...document.querySelectorAll('.Goodclass01, .Goodclass02, .Goodclass03')]
    .forEach(e => e.classList.remove('BADCLASS'));

const elements = [...document.querySelectorAll('.Goodclass01, .Goodclass02, .Goodclass03')];
elements.forEach(e => e.classList.remove('BADCLASS'));
console.log(elements);

<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"]'>link</a>
  <a href="SOME LINK" class="BADCLASS">link</a>
</div>

使用 jQuery:

$('.Goodclass01, .Goodclass02, .Goodclass03').removeClass('BADCLASS');

const elements = $('.Goodclass01, .Goodclass02, .Goodclass03');
elements.removeClass('BADCLASS');
console.log(elements);

<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"]'>link</a>
  <a href="SOME LINK" class="BADCLASS">link</a>
</div>

在文档空闲时运行

run-at 指令的默认值是 document-idle，但如果由于某种原因已更改，则它需要是 document- idle，否则您需要以其他方式延迟脚本的执行，直到文档加载完毕。

您可以在用户脚本 header 中使用 run-at 指令，如下所示:

// @run-at     document-idle

或者附加一个加载事件监听器到窗口

window.addEventListener('load', function() { /* do stuff */ }, false);

包含 jQuery

如果您使用的是 jQuery 解决方案之一，则必须使用 require 用户脚本 header 指令来包含 jQuery，如下所示:

// @require    https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js