Removing all elements that has an element with a certain class, nested inside them

JavaScript
1

After many of tries I, the humble beginner, feel the need to ask for an expert’s take on this. Here’s the main code I tried:

let cardoo = document.querySelectorAll(".card");
for ( const element of cardoo ) {
  if ( !$(element).hasClass('pro-content') ) {
     element.style.display = "none";
  }
}

I use this code to display: none all elements that doesn’t have the (nested) class of pro-content, in the following webpage. In other words, I seek to display: none all divs that doesn’t have it.

For some reason this code deleted all divs, not just those without the class… This is strange given the if statement seems valid.

While I keep trying to debug this but you might have any advice.

2

you are aware that .card and .pro-content are of different elements?

3

Of course, but as I understand, one contains the other (the element classed .card contains/nests the element classed .pro-content), on this I aim to base my conditional statement as of "if .card doesn’t have .pro-content, hide .card).

4

worded this way, it means that both classes are on the same element … (which would make it easy)

I would select all elements with .pro-content inside .card, map back onto the .card elements and diff that against all .card elements (.card not(.pro-content) wouldn’t work since this would select all elements inside .card except those with .pro-content … not what you want)

5

I am not sure I understand. Would you use this? I tried to read there in MDN but didn’t understand this code, especially how the string-handler indexOf is connected to that.

6

Since you’re already using jQuery I’d use its .map() (and document.querySelectorAll() does not return an array)

there is no String.indexOf() on that page. On the left side you have links to all the other array methods …

7

You’re testing if element itself has the class pro-content; if you want to check if it has (or doesn’t have) a child with that class, you can just use querySelector here as well:

let cardoo = document.querySelectorAll(".card");
for ( const element of cardoo ) {
  if ( !element.querySelector('.pro-content') ) {
     element.style.display = "none";
  }
}
8

Replying a bit in late, in the end I used this (also a solution with 2 querySelectors, while the first one is with All):

for (const card of document.querySelectorAll(".card")) {
    if (!card.querySelector(".pro-content")) {
        card.style.display = "none";
    }
}
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.