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();
    });

});