Tampermonkey to Hide elements without specific text?

Question

On the steam market, the code for the listing is like:

<span id="listing_285218391330225741_name" class="market_listing_item_name" style="color: #CF6A32;">StatTrak™ M4A1-S | Cyrex (Minimal Wear) 
    <span style="color:red">
        (warning)
    </span>
</span>

Using some steam enhancer plugin, it adds <span style="color:red"> (warning) </span> to any item with a name tag.

Since every listing has spans, is there a way using javascript (Tampermonkey) to remove any span that doesn't contain the words "warning"?

In other words, only show the listings with name tags.

Answer 1

In general:

1. Get a list of all the spans/nodes that you might want to delete.
2. Filter out the ones that contain your specific text.
3. Delete or hide what's left.
4. Beware of AJAX (or plugin) timing issues.

You can do steps 1 thru 3 with jQuery like:

var itemRows     = $(".market_listing_row_link");
var rowsToDelete = itemRows.not (":has(.market_listing_item_name > span:contains('(warning)'))");
rowsToDelete.hide ();

---

BUT, since the warning is added by a plugin (and/or some market pages might be added by AJAX techniques), chances are good that your Tampermonkey script will run before the page is finished the way you expect/need it to be.

To compensate for that, use techniques like waitForKeyElements() and find some condition whereby you can know that the "plugin" you mentioned has finished its work.

Since you didn't provide details, we will assume that the plugin finishes before the window load event fires.

So, here is a complete Tampermonkey script that works in both AJAX and static scenarios (you may have to provide an additional delay based on this "plugin"):

// ==UserScript==
// @name     _Steam Market, hide items that DON't have a warning!?
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @match    *://steamcommunity.com/market*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM/TM 1.0.   It restores the sandbox.
*/
window.addEventListener ("load", function () {
    waitForKeyElements (".market_listing_row_link", hideUnwarnedRows);
}, false);

function hideUnwarnedRows (jNode) {
    if (jNode.has (".market_listing_item_name > span:contains('(warning)')").length) {
        return;
    }
    jNode.hide ();
}

Answer 2

If you can guarantee that the span styles for warnings are red, you can do

var elms = document.querySelectorAll('.market_listing_item_name > span[style="color:red"]');

to get every warning span. Then, hide the parents by looping over them all and applying a style

elms.forEach(function(el){
    el.parentElement.style.display = "hidden";
}