Search code examples
javascriptjqueryxpathgreasemonkey

Trouble removing nodes based on a specific href, on an AJAX-driven page?

It's should be simple, but everything I'm trying doesn't seem to work. Maybe I'm overly tired, so I'm asking for fresh eyes. Please help.
In Greasemonkey: Check page for this exact link <a href="#?#/3/">. If it's there, remove its parents from view.

Things I've tried (pretty much all can be found on another stack page)

1 from this

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
$("a[href='#?#/3']").parent().parent().parent().parent().parent().remove();

2

$("a").each(function() {
    if (this.href.indexOf('#?#/3/') != -1) {
        this.parent().parent().parent().parent().parent().parent().remove();
    }
/});

3

$('a').each(function () {
  if ($(this) == 'url("#?#/3/")' {
    $(this).parent().parent().parent().parent().parent().remove();
  }
});

4

var targNode = document.querySelector ("BODY>DIV:nth-of-type(2)>DIV>DIV:nth-of-type(3)>DIV:nth-of-type(2)>DIV:nth-of-type(3)");
var targNodeCheck = targNode.contains("#?#/3");
var targNodeFull = targNode.parent().parent().parent().parent().parent(); 

if (targNodeCheck === true){
  targNodefull.style.display = "none";
}

EDIT

I didn't think about that before, but it's true you do need to wait for the page to load. (about 3 seconds, there's a jQuery loading wheel) I didn't believe that was an issue with the Greasemonkey extension?

This is essentially what the structure of the website is. And there are 200+ initial div classes with different URLs to parse. 

<BODY>
    <DIV CLASS="one">
        <DIV CLASS="HOLDER">
            <DIV CLASS="A one">
                <DIV CLASS="IMAGES">
                    <DIV CLASS="LINKHOLDER">
                        <A HREF="#?#/13121/">Link</a>
                        <A HREF="#?#/21231/">Link</a>
                        <A HREF="#?#/3/">Link</a>
                        <A HREF="#?#/41551/">Link</a>
                        <A HREF="#?#/54600/">Link</a>
                        <A HREF="#?#/61650/">Link</a>
                        <A HREF="#?#/72613/">Link</a>
                        <A HREF="#?#/83454/">Link</a>
                        </DIV>
Solution

  • If you see a jQuery loading wheel then the page is definitely generated by a script which means that the element you need doesn't exist when the userscript is executed at DOMContentLoaded / load event by default (about the same time as $(document).ready() or $(function() { ... }))

    The correct solution is to either check periodically (setTimeout / setInterval) whether the element appeared or use a MutationObserver.

    An example using setMutationHandler wrapper:

    // @require https://greasyfork.org/scripts/12228/code/setMutationHandler.js

setMutationHandler(document, "a[href='#?#/3']", function(nodes) {
    nodes.forEach(function(n) {
        $(n).parents().get(4).remove();
    });
    return true; // continue enumeration of current Mutations batch
});