work on all <span> at the current <div> then check for the value of an attribute of the <span>

Question

i am kinda stuck with my javascript, I am making a greasemonkey script for a site, that restricts me to use plain-old javascript only. For now, my script currently does is, search for all the tables, and table row with ProjectTable-row then for each ProjectTable-row look for a div with ProjectTable-status, if that div is not found, it will delete the whole row.

it works great.

document.getElementById("gmSomeID").onclick = function showAlert() {
    console.log('invoked');
    var projectDescriptions = document.querySelectorAll('tr.ProjectTable-row'),
        projectDescriptions = Array.prototype.slice.call(projectDescriptions); 
    projectDescriptions.forEach(function(el) { 
        if (el.querySelector('div.ProjectTable-status')) {
        } else {
             el.parentNode.removeChild(el);
        }
    });
}

but, now I do not know how to work on the current div and loop on all span inside it. I am still 2 steps short.

1. Loop on all span
2. Search for all span which contains data-content="apple" if none of the span has this attribute, then delete it.

Something like this:

For a HTML tag like this:

<div class="ProjectTable-status">
    <span data-content="apple">
    </span>
</div>

this will not be deleted data-content is apple.

For a HTML tag like this:

<div class="ProjectTable-status">
    <span data-content="banana">
    </span>
</div>

this will be deleted, no span has data-content="apple".

For HTML code like this:

<div class="ProjectTable-status">
    <span data-content="banana"></span>
    <span data-content="apple"></span>
</div>

this will NOT be deleted, the div contains at least 1 span that has data-content of apple.

I have no idea, how to proceed now and really tired or trying anything, i do not even know how to check for attribute value.

Hope someone can guide or put me at the right path.

Thanks!

Answer 1

Starting with what you provided, I've just slightly refactored it to check for an "apple" span within each div as it loops through. Using continue, we can execute the next iteration of the loop without deleting the div element if we find that it contains an "apple" span. This code is not tested, but just what came off the top of my head, so it might need some tweaking.

document.getElementById("gmSomeID").onclick = function showAlert() {
console.log('invoked');
var projectDescriptions = document.querySelectorAll('tr.ProjectTable-row'),
    projectDescriptions = Array.prototype.slice.call(projectDescriptions);
//pointer to work with current div 
var currentDiv;
projectDescriptions.forEach(function(el) { 
    currentDiv = el.querySelector('div.ProjectTable-status');
    //do we have a div?
    if (currentDiv) {
        //look for an apple within the div
        if(currentDiv.querySelector('span[data-content="apple"]')){
             //go to the next iteration of the loop without delete
             continue;
        }
    } 
    //if we made it this far, we didn't find an apple
    el.parentNode.removeChild(el);            
});

};