-1

Is there a possibility to hide elements if the data contains a piece of text?

For example: Hide the divs that it's data contains "-en"

<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!

Vander
  • 79
  • 9

2 Answers2

5

You can do this with either css or Javascript.

CSS

[data-value*="-en"] {
  display: none;
}

And if you wanted to do it based on classes.

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

JS

document.querySelectorAll('[data-value*="-en"]').forEach((elem) => elem.style.display = 'none');
aphextwix
  • 1,838
  • 3
  • 21
  • 27
  • Yup, CSS's worked :) Many thanks! And another question, is :not() working with this? Could :not([data-value....) work? – Vander Dec 01 '20 at 08:13
  • Using `:not()` could work, but your selector list could end up being quite large depending on how many you want to exclude. – aphextwix Dec 01 '20 at 08:28
  • Thanks @aphextwix Last question (srry lol), is it possible to do the same with classes? Hiding the classes that contains -en? for example:
    Just hide the ones that it's class contains -en? Thanks dude     – Vander Dec 01 '20 at 08:33
  • 1
    @Vander - I've updated my answer to show an example of using classes. – aphextwix Dec 01 '20 at 08:39
0

You could use an attribute selector

div[data-value*="-en"] {
  display: none;
}
<div class="check" data-value="check-en">1</div>
<div class="check" data-value="check-en">2</div>
<div class="check" data-value="check-fr">3</div>
<div class="check" data-value="check-fr">4</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52
  • Hi gerard, thanks for your reply. Thing is that not all datas are "check", there is other with other names and "-en" to the end... could it be a global solution? Thanks – Vander Dec 01 '20 at 08:05