How do I use Greasemonkey to hide an XPath element?

4.3k Views Asked by At

I have an XPath /html/body/div[1]/div/div/center[1]/table and I would like to make it so it is no longer visible.

I saw I could use document.evaluate() but I am not sure how to hide it.

1

There are 1 best solutions below

0
On BEST ANSWER

If you insist on using XPath, for a single node, use FIRST_ORDERED_NODE_TYPE like so:

var targEval = document.evaluate (
    "/html/body/div[1]/div/div/center[1]/table",
    document.documentElement,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null
);
if (targEval  &&  targEval.singleNodeValue) {
    var targNode  = targEval.singleNodeValue;

    // Payload code starts here.
    targNode.style.display = "none";
}



But, XPath selectors are very brittle in userscripts. You're better off using a CSS selector in most cases.
Since the HTML wasn't provided, here is the CSS-selector method shown with a translation of that XPath into a CSS selector:

var targNode = document.querySelector ("body > div:nth-of-type(1) > div > div > center:nth-of-type(1) > table");
if (targNode) {
    targNode.style.display = "none";
}



Of course, it's even simpler with jQuery:

$("body > div:first > div > div > center:first > table").hide ();

or possibly:

$("body > div:first > div > div > center:first > table").first ().hide ();



If the node is added via AJAX, use a technique such as in this answer.