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

Question

我花了太多时间试图解决这个问题，因为JavaScript不是我的主要语言而且还不是jQuery大师，我已经确定我需要寻求帮助。

在生成的页面具有DIV的结构的情况下，由于某些奇怪的原因没有ID，多个非标准数据标签属性标签，但至少标准样式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>

在此示例中，由于函数与BADCLASS样式分配相关联，因此在单击上面的href链接时会触发一个javascript函数。所以，通过大量的搜索，似乎我应该能够通过任何最初分配的类来获取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'));

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用jQuery：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

从元素子集中删除类

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用jQuery：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在文档空闲时运行

run-at指令的默认值为document-idle，但如果由于某些原因已更改，则需要document-idle，否则您需要延迟执行脚本，直到文档加载。

您可以在userscript标题中使用run-at指令，如下所示：

// @run-at     document-idle

或者将加载事件侦听器附加到窗口

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

包含jQuery

如果您正在使用其中一个jQuery解决方案，则必须使用require userscript header指令包含jQuery，如下所示：

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

Answer 2

在下面的两个明确，令人敬畏的正确答案的帮助下得到它，字面上是在我的帖子之后几秒钟内发出的，所以感谢@Tiny和@Damian以下！

我赞同两者，因为他们都列出了相同的正确jQuery答案，Tiny也提供了纯粹的JS。

我在下面发布完整的答案，因为没有其他步骤，使用Tamper / Greasemonkey都不会产生预期的结果。

首先，Tamper / Greasemonkey默认情况下不加载jQuery，所以将@require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.mi n.js添加到当前脚本并放置它就很简单。$ = this.jQuery = jQuery .noConflict（真）;避免任何版本冲突。

此外，在这种情况下，遗憾的是我无法将我的TamperMonkey标题更改为：

// @run-at    document-idle

以及上面提到的：

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

并以：

开始编写脚本

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

最后是这个案例中的主要接受/最佳答案：

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

注意：上面的@ run-at行是必需的，因为我的当前Tamper / Greasemonkey脚本实际上设置了很多（全部）默认设置为START，所以这很重要它意味着像这样的函数必须分离到它们自己的脚本，以便在页面加载（空闲）之后运行。一旦添加，即使是Tiny的上述纯JS回答确实产生了预期的结果。

作为我希望在Javascript中可能的最简单的单行答案，因为在一行代码中它是如此多的其他语言。我过去曾使用过它，但不知道这个特殊的removeClass方法。

Answer 3

你的问题提到了jQuery。你想要一个jQuery的解决方案吗？

如果是这样，它就像：

一样简单

$(".Goodclass01").removeClass("badclass");

说明：

jQuery可以引用为jQuery()或$()。您可以传递的参数是：1，Selector语句（如CSS）和2，context（可选;默认是文档）。

通过陈述$(".Goodclass01")你正在陈述，＆＃34;给我一个jQuery对象，其中包含所有具有类Goodclass01的元素。＆＃34;然后，通过使用removeClass()函数，您可以传递任何参数，它将删除所有类，或者您可以传递特定的类来删除。在这种情况下，我们调用.removeClass("badclass")以删除不需要的类。

现在，如果您只需要选择特定元素，例如Goodclass01的链接，您可以执行以下操作：

$("a.GoodClass01").removeClass("badclass");

或者，如果你想选择任何有Goodclass01但不是Goodclass02的东西，你可以这样做：

$(".Goodclass01:not(.Goodclass02)").removeClass("badclass");

jQuery并不像它看起来那么令人生畏。试一试！

修改：我还注意到您尝试捕获可能包含特定属性的链接。您可以使用[property]语法选择具有特定属性的元素。最常见的情况是，人们使用$("a[href^=https]")或类似的内容来选择所有a个标签，其属性href以^=字符串https开头。

在您的情况下，您可以使用以下内容......

$("a[data-tag-one]")

...选择具有属性data-tag-one的所有链接。

注意：要记住的一点是，jQuery对象与纯DOM元素不同。如果您有多个元素的集合，并且特别想在一个元素上使用纯JavaScript函数，则必须使用[0]或.get(0)来引用它。一旦你这样做，在将它转换回jQuery对象之前，你将无法再使用jQuery方法。

但是，由于jQuery有一大堆方法可以使DOM操作更容易，你可以完成使用这些方法所需的工作。

编辑：我已在下面添加了一个代码段，以便您可以看到一些jQuery选择器正在运行。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
div#main * { background-color: #66ff66; }
div#main .BADCLASS, div#main .BADCLASS * { background-color: #ff8888 !important; }
</style>

<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"]'>All classes and data-tag-one</a><br />
  <a href="SOME LINK" class="Goodclass01 BADCLASS" data-tag-one='["value", "value"]'>Goodclass01 and data-tag-one</a><br />
  <a href="SOME LINK" class="Goodclass01 Goodclass02 Goodclass03 BADCLASS">All classes, no data-tag-one</a><br />
  <a href="SOME LINK" class="BADCLASS" data-tag-one='["value", "value"]'>Just BADCLASS and data-tag-one</a><br />
  <br />
  <table class="Goodclass01 BADCLASS"><tr><td>Here is a table</td></tr><tr><td>with Goodclass01 and BADCLASS</td></tr></table>
</div>
<hr>
<div id="buttons">
<a href="#" id="button1">$(".Goodclass01").removeClass("BADCLASS");</a><br />
<a href="#" id="button2">$("a.Goodclass01").removeClass("BADCLASS");</a><br />
<a href="#" id="button3">$(".Goodclass01:not(.Goodclass02)").removeClass("BADCLASS");</a><br />
<a href="#" id="button4">$("a[data-tag-one]").removeClass("BADCLASS");</a><br />
<a href="#" id="button5">Reset the HTML</a><br />
</div>

<script>
$("#button1").click(function(){
  $(".Goodclass01").removeClass("BADCLASS");
});
$("#button2").click(function(){
  $("a.Goodclass01").removeClass("BADCLASS");
});
$("#button3").click(function(){
  $(".Goodclass01:not(.Goodclass02)").removeClass("BADCLASS");
});
$("#button4").click(function(){
  $("a[data-tag-one]").removeClass("BADCLASS");
});
$("#button5").click(function(){
  var str = '<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"]\'>All classes and data-tag-one</a><br /><a href="SOME LINK" class="Goodclass01 BADCLASS" data-tag-one=\'["value", "value"]\'>Goodclass01 and data-tag-one</a><br /><a href="SOME LINK" class="Goodclass01 Goodclass02 Goodclass03 BADCLASS">All classes, no data-tag-one</a><br /><a href="SOME LINK" class="BADCLASS" data-tag-one=\'["value", "value"]\'>Just BADCLASS and data-tag-one</a><br /><br /><table class="Goodclass01 BADCLASS"><tr><td>Here is a table</td></tr><tr><td>with Goodclass01 and BADCLASS</td></tr></table>';
  $("div#main").html(str);
});
</script>

＆＃13;

＆＃13;

＆＃13;