Hide element if data contains specific text

Place to talk about website HTM elements, CSS style and design, and get help with HTML, CSS codes.
Marius
Posts: 106

Hide element if data contains specific text

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!

MarPlo
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');

Similar Topics