Page 1 of 1

Hide element if data contains specific text

Posted: 03 Dec 2020, 07:10
by 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!

Hide element if data contains specific text

Posted: 03 Dec 2020, 08:52
by 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');