javascript on page load check if a span (under <tr>) with a specific class exist, if does not exist remove the entire <tr>

Question

I am trying to create my own greasemonkey script for my favorite directory listing site :)

The thing is not everything it list is beneficial to me, I inspected the website code and as it seems, each entry is under

Now, and as it seems, I am only interested with those which have this format:

<tr class="project-description">
<td colspan="6">
    <div class="project-desc-inner">
        <div class="project-synopsis">
            <p class="trunk8">This is an entry</p>
        </div>
        <div class="project-verification">
            <span class="verfied-badge"> <~~~~~~~~~~ THIS SPAN
                <span class="currency-symbol">$</span>
                <span class="icon-tick"></span>
                Verified
            </span>
        </div>
        <div class="project-actions">
            <a href="#">
                <button class="btn">LOL</button>
            </a>
        </div>
    </div>
</td>
</tr>

As you can see, the existence of <span class="verfied-badge"> triggers it.

I also wish that the javascript process this after the page loads, because the site populates the table via javascript too.

I know I haven't done in my problem yet, but if somebody can just provide an example that can lead me, that is enough.

Thank you very much!

Answer 1

$(document).ready(function(){
    $("tr.project-details").each(function(){
       var self = $(this);
       if(self.find("span.verfied-badge").length==0)
           self.remove();
    });

});

Answer 2

Filtered selector that calls .remove only once

Since there're other span elements within TR that are unrelated to the problem it's not possible to write a pure CSS filter selector string (so we could either use .has) to sufficiently filter elements. but instead of removing each table row individually we filter them first and remove them all at once.

$("tr.project-description").filter(function() {
    return !$("span.verfied-badge", this).length;
}).remove();