Hide element if data contains specific text

[Marius]

Is there a possibility to hide HTML elements if the 'data-' attribute contains a specific piece of text?
For example: Hide the Divs that it's data contains "-en".

Code: Select all

<div class='check' data-value='example-en'></div>
<div class='check' data-value='check-en'></div>
<div class='check' data-value='example2-en'></div>
<div class='check' data-value='check-fr'></div>

Thanks!

You can do this with either CSS or Javascript.

CSS:

Code: Select all

/* with specified elements */
div[data-value*='-en'] {
  display: none;
}

/* or global */
[data-value*='-en'] {
  display: none;
}

And if you wanted to do it based on data in classes name.

Code: Select all

[class*='-en'] {
  display: none;
}

And JS:

Code: Select all

document.querySelectorAll('[data-value*="-en"]').forEach((elem) => elem.style.display ='none');