looping through html and deleting not found

So, i’m looping through the document body searching for all “#result>tbody>tr” objects. I’m then trying to search within those elements to see if any of the names exist, if they do, I would like to delete them. I got it working if I don’t loop through the names and use a single object. If I try and loop through the names, it only loops four times and then nothing else happens.

Any ideas?

Edit: Currently there are 30 objects the first loop loops through. When I add the second loop into the mix to see if the sub-objects exist, it will only loop through four and than break the loop. Hope that explains better.

Example: https://jsfiddle.net/8c9p7bp5/1/

var dlList = document.querySelectorAll("#result>tbody>tr");
for (var i = 0, len = dlList.length; i < len; i++) {

    var names = ['Test', 'Router', 'IP', 'Mod'];

    for (var j = 0, len = names.length; j < len; j++) {
        var vi = dlList[i].querySelector("td>br>img[title^='" + names[i] + "']");

        if(!dlList[i].contains(vi)) {
            //dlList[i].remove();
            console.log(dlList[i]);
        }

    }
}

You initialize j but never use it in the inner loop.

Try this instead:

var vi = dlList[i].querySelector(“td>br>img[title^='” + names[j] + “‘]”);

Also, you should use a different variable than len for the inner loop to avoid running into variable scope issues.

First mistake of your code that you are using same limit for you nested loop “len”, in the first iteration the value becomes 4 that’s why it will break the parent loop.