Replace HTML using JavaScript

Ich bin gerade dabei mir gerade ein kleines (TamperMonkey-)Script zu basteln um ein paar Elemente bestimmter Websites zu ändern. Style-Sheets zu ändern ist recht leicht, ich habe aber nur sehr wenig JavaScript Erfahrung.

Derzeit versuche ich gerade ein DIV Element zu ändern, leider haben die alle keine ID (es sind quasi lauter verschachtelte DIV tags ineinander die verschiedene Klassen besitzen).

Das was ich versuche zu ändern sieht so aus:

Code:

<div class="slds-grid slds-gutters_small mdp cols-2 forcePageBlockSectionRow" data-aura-rendered-by="871:0" data-aura-class="forcePageBlockSectionRow">

Davon möchte ich einfach den ersten Block "slds-grid" entfernen. Die DIV tags unterscheiden sich auf dieser Ebene quasi nur durch die Nummer bei data-aura-rendered-by="xxx:0" (die anderen möchte ich nämlich unangetastet lassen).
<div class="slds-grid slds-gutters_small mdp cols-2 forcePageBlockSectionRow" data-aura-rendered-by="871:0" data-aura-class="forcePageBlockSectionRow">

Also das Resultat sollte so aussehen:

Code:

<div class="slds-gutters_small mdp cols-2 forcePageBlockSectionRow" data-aura-rendered-by="871:0" data-aura-class="forcePageBlockSectionRow">

Es ist vermutlich deppen-einfach, nur wie gesagt so gut wie keine Programmiererfahrung.

Mein aktuelles Script sieht in etwa so aus (funktioniert natürlich nicht):

Code:

(function() { 

'use strict';
   document.body.innerHTML = document.body.innerHTML.replace("slds-grid slds-gutters_small mdp cols-2 forcePageBlockSectionRow\" data-aura-rendered-by=\"872",
                                                             "slds-gutters_small mdp cols-2 forcePageBlockSectionRow\" data-aura-rendered-by=\"872");
})();

Bin auch ein n00b, aber meine Idee dazu:
Sind die klassen auf den verschiedenen div´s einmalig? Wenn ja, jquery einbinden und mit $( "div.slds-gutters_small" ) ansprechen, .removeClass() zum entfernen.

Das Script macht zumindest bei mir (Chrome v70) nichts sichtbares.
So wie es für mich aussieht würde es die Klasse aber auch überall entfernen? Das wäre auch nicht das was ich wollen würde.


Bei mir im Browser sieht es so aus (es ist leider eine interne Website, deswegen kann ich nicht einfach eine URL posten und es hätte auch keiner Zugang).


Das "Description" Feld wollte ich prinzipiell einfach breiter machen und das geht indem man von dem einen DIV Tag die slds-grid Klasse wegnimmt (die restlichen Felder darüber und darunter sollten das behalten), die prinzipiell lt. CSS einfach display:flex drauf klatscht.

Code:

.slds-grid{
    display:flex
}

/Edit: Ist nur ein persönliches Anliegen (OCD schlägt zu), dachte nur ich poste es da es für einen versierten User ev. ein Einzeiler ist Soll nicht in zuviel Arbeit ausarten.

Ich check deine Frage irgendwie ned . Du hast eine Anzahl an HTML-Elementen mit einer CSS-Klasse "slds-grid" und du möchtest eben diese Klasse von jedem Element entfernen. Dann ist das Snippet von ill das richtige. Aber du sagst du willst es nicht auf der gesamten Seite entfernen?

Dann suchs mit doc.findElementByAttribute("data-aura-rendered-by", "872:0"); und lösch die klasse raus

Code: JAVASCRIPT

$('div[data-aura-rendered-by="872:0"]').removeClass('slds-grid');

Wenn jQuery-Code überhaupt möglich ist. Es könnte auch sein, dass du $() mit dem allgemein kompatibleren jQuery() ersetzen musst.

Zitat aus einem Post von -=Willi=-

Pfui, ihr mit eurem jQuery immer .

Code: JAVASCRIPT

document.querySelectorAll('[data-aura-rendered-by="987:0"] .slds-grid').forEach(element => {
  element.classList.remove('slds-grid');
});

Die Methode habe ich auch gerade auf stackoverflow gefunden

Hier mal mein komplettes Script

Code: JAVASCRIPT

// ==UserScript==
// @name         Title
// @namespace    [url]http://tampermonkey.net/[/url]
// @version      0.1
// @description  Description!
// @author       Author
// @match        [url]https://myurl/[/url]
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  document.querySelectorAll('[data-aura-rendered-by="871:0"] .slds-grid').forEach(element => {
  element.classList.remove('slds-grid'); });

  document.querySelectorAll('[data-aura-rendered-by="872:0"] .slds-grid').forEach(element => {
  element.classList.remove('slds-grid'); });

})();

Leider macht das ebenso nichts auf der Seite (keine Veränderung und lt. Dev Tools sind die Klassen immer noch vorhanden

Zitat aus einem Post von Snoop

verwendest du ein javascript framework welches das dom nach dem laden verändert?
falls ja, pack deine manipulationen in eine function und ruf sie als callback auf

Keine Ahnung (die Seite lädt einige verschiedene .js, unter anderem von SalesForce) und keine Ahnung how to. Wie gesagt, ich habe nicht wirklich Erfahrung mit dem Programmieren, dachte mir nur es geht ev. recht schnell. Ich verbrenne da eh schon viel zu viel Zeit für so eine winzige Änderung