Removing a div class with script-CodePudding

I am trying to remove two elements from youtube. They are gradients that appear white when using chromes force dark mode and are titled div.ytp-gradient-top and div.ytp-gradient-bottom. When I manually delete the thing in the html they go away and achieve the desired result. I am trying to use tamper monkey to write a script that always does this for me but nothing I do seems to work. here is an example of the effect and class I am trying to remove. there is a top gradient as well. here you can see when deleted, the ugly gradient goes awaywhen class is deleted the effect is removed

// ==UserScript==
// @name        Chrome Force Dark Mode Fix/White Overlay Fix
// @namespace   namespace
// @version     1.0
// @match     *://youtube.com*
// @description Fixes Chrome Force Dark Mode on YouTube
// @grant       GM_addStyle
// @grant       GM.getValue
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @run-at      document-idle
// ==/UserScript==
/* globals jQuery, $, waitForKeyElements */
waitForKeyElements ("div.ytp-gradient-top", removeNode);
waitForKeyElements ("div.ytp-gradient-bottom", removeNode);
function removeNode (jNode) {
    jNode.remove ();
}
(function() {
    'use strict';

    var elems = "div.ytp-gradient-top";
    elems.item(0).remove();
    var elems1 = document.getElementById("div.ytp-gradient-bottom");
    elems1.remove();
})();
var badDivs = $("div.ytp-gradient-top div.ytp-gradient-bottom");

badDivs.parent ().remove ();
// find element
const todelete = document.getElementById('div.ytp-gradient-bottom');
// remove element if found
if (todelete) { todelete.style.display = 'none'; }

This is the code I have so far, taken from a bunch of somewhat similar things I could find online including here, from what I can see this is 4 different ways where I should be able to accomplish my relatively simple goal, but from what I can tell, this doesnt end up doing anything. Any help would be appriciated.

CodePudding user response：

The code is failing to remove the elements because you're trying to remove the elements by class selectors instead of by the class name itself. You can try changing your code as follows:

// ==UserScript==
// @name        Chrome Force Dark Mode       Fix/White Overlay Fix
// @namespace   namespace
// @version     1.0
// @match     *://youtube.com*
// @description Fixes Chrome Force Dark Mode on YouTube
// @grant       GM_addStyle
// @grant       GM.getValue
// @require      http://ajax.googleapis.com/ajax/libs/jquery/2.    1.0/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @run-at      document-idle
// ==/UserScript==

waitForKeyElements (".ytp-gradient-top", removeNode);
waitForKeyElements (".ytp-gradient-bottom", removeNode);

function removeNode (jNode) {
    jNode.remove();
}

This code uses the . symbol to select elements by class name. The waitForKeyElements function waits for elements to appear on the page and removes them when they do.

CodePudding user response：

apparantly something was wrong with the meta data. I started over and tried this and it worked

// ==UserScript==
// @name         Chrome Force Dark Mode Fix/White Overlay Fix
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @grant        none
// @include        http://*
// @include        https://*
// ==/UserScript==

(function() {
    'use strict';

    var elems1 = document.getElementsByClassName('ytp-gradient-bottom');
    elems1[0].parentNode.removeChild(elems1[0]);
    elems1 = document.getElementsByClassName('ytp-gradient-top');
    elems1[0].parentNode.removeChild(elems1[0]);
})();