Maybe try it out with XPATH

Here:

// ==UserScript==
// @name         Filter Out $0.00 Garbage
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  ...
// @author       Me
// @match        https://play.google.com/store/account/orderhistory*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
// @grant        none
// ==/UserScript==

(function() {
    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    const observer = new MutationObserver(hideZeroElements);
    // tried with div elements but does not seem to work.
    observer.observe(document.body, {
        subtree: true,
        childList: true,
        attributes: false
    });
})();

function hideZeroElements(mutations, observer) {
  /**
  * Get all the divs whom grand children contain a 0,00 value or 0.00 in your case
  */
  const history = document.evaluate('//div[div[2]/div//div[contains(text(), "0.00")]]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  /**
  * Loop over all the elements found and hide them.
  */
  for ( let i = 0; i < history.snapshotLength; i++) {
      history.snapshotItem(i).style.display = "none";
  }
}

Note: I'm not sure if there is a way to disconnect the observer or not inside the userscript.

You may be relying on classNames that change. JavaScript libraries like Angular/React/etc may change IDs and ClassNames to obfuscate code.

Try using DOM selectors and DOM traversal methods that do not rely on constant ID and class names.

Try this:

// ==UserScript==
// @name         play.google.com/store/account/orderhistory
// @namespace    http://tampermonkey.net/
// @match        https://play.google.com/store/account/orderhistory
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const container = document.querySelector('body>c-wiz:nth-child(5)>div>div>div:nth-child(3)+div>div:nth-child(1)');
    const orders = container.querySelectorAll('div');
    orders.forEach((el,_) => {
        const bucks = el.querySelector('div:nth-child(2)>div>div:nth-child(2)');
        if (bucks !== null){
            if (bucks.innerText === 'US$0.00') el.remove();
        }
    });

})();

Here is another answer responding to your comment (could not respond with a comment because more flexibility required).

Does the TM icon get a red dot when you visit that page? If so, the script is running but not working; if not, the @match line is not triggering the script (i.e. does not match the url). Can you determine which is the case?

Next thing to check: open DevTools (F12) and paste in the first querySelector. Does DevTools show anything like this (DevTools is responding with div.NgfTBf.fny74c):

If nothing appears when you paste-in that querySelector line, it might be necessary to tweak that selector. The way to do that is to build-up the selector bit-by-bit and see what happens as each stage is added:

document.querySelector('body')  //this HAS to return something...!

then:

document.querySelector('body>c-wiz:nth-child(5)')

(that one might need to be nth-child(3) - try that also)

At each stage, Chrome DevTools should show something. For example:

You might find this video to be helpful: https://www.youtube.com/watch?v=SowaJlX1uKA

Let me know what you see.