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

编程入门行业动态更新时间:2024-10-27 11:19:26

Javascript / Greasemonkey / Userscript.js标识元素并删除许多类中的一个(Javascript / Greasemonkey / Userscript.js identify element and remove one of many classes)

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

在生成的页面具有DIV的结构的情况下，由于某些奇怪的原因没有ID，多个非标准数据标签属性标签，但至少是标准样式CLASS赋值....但是......它已被分配MULTIPLE类。

现在，只有其中一个样式类是这样的，它有一个我想要中性的关联代码事件，并保留所有其他类仍然分配。我在那里尝试过的（这个列表远非完整，我尝试了很多东西）：

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浏览器中运行！

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

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

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!

最满意答案

从所有元素中删除该类

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

[...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 ，否则需要延迟执行脚本，直到文档加载完毕。  
 您可以在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
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.