Deleting a node by class is not working in my Tampermonkey script?

Question

I know how to remove a div by class (document.getElementsByClassName('Button')[0].remove()).
But when it is in a link:

<a class="Button" href=""><span>test</span></a>

it isn't working.

Why not?

Answer 1

The problem is probably that the page adds that link dynamically using javascript (AJAX).
^{(Also, the question code would only kill the first such node, and the one you want gone may be later.)}

In that case, you need to use AJAX-compensating techniques such as MutationObserver or waitForKeyElements (or clunky hand-coded timers).

Here's a robust way (complete working script):

// ==UserScript==
// @name     _Remove node(s) with a specified class
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @noframes
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.
/* global $, waitForKeyElements */

waitForKeyElements (".Button", removeNode);

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

Notes:

1. .Button is the CSS and jQuery selector for nodes with the Button class.
2. The shown code removes all nodes with class Button. To remove only the first node, use: waitForKeyElements (".Button", removeNode, true); -- but this is seldom needed.
3. See Choosing and activating the right controls on an AJAX-driven site for tips on identifying and refining selectors.