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.

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.

• javascript
• xpath
• greasemonkey
• tampermonkey

Share Improve this question Follow edited Nov 12, 2014 at 9:00 Brock Adams 93.7k2323 gold badges241241 silver badges305305 bronze badges asked Nov 12, 2014 at 7:35 BijanBijan 8,7322121 gold badges102102 silver badges162162 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.