javascript on page load check if a span (under 2020-05-04 05:58发布 站内文章 / JavaScript 65 0 0

问题:

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!

回答1:

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

});

回答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();