How can I hide element with the data-xxx attribute in javascript?

Question

I want to hide a div but just the div with a special data-xxx.

<div data-platform="dinner"  class="product">Dinner</div>
<div data-platform="lunch"  class="product">lunch</div>

ATTENTION:

I want to hide all data-platform which are "dinner".

Does this answer your question? [Select all elements with a "data-xxx" attribute without using jQuery](https://stackoverflow.com/questions/7084557/select-all-elements-with-a-data-xxx-attribute-without-using-jquery) — Anurag Srivastava, Apr 06 '21 at 17:48
@Mr.Polywhirl Yes, which means pure JS which is what the dupe provides — Anurag Srivastava, Apr 06 '21 at 17:52
@AnuragSrivastava because i just want to hide the data-platform lunch and dinner should be visible — NilsVonBismarck, Apr 06 '21 at 17:53
@NilsVonBismarck How is the `data-platform` getting shown right now? — Heretic Monkey, Apr 06 '21 at 17:54

Mr. Polywhirl · Accepted Answer · 2021-04-06T19:16:11.173

2

Pure CSS

You could set the display to none for a "data-attribute" of platform that equals "dinner".

div[data-platform="dinner"] {
  display: none;
}

<div data-platform="dinner" class="product">Dinner</div>
<div data-platform="lunch" class="product">Lunch</div>

With JavaScript

Filter all the <div> elements with the platform "data-attribute", filter the ones that have a value of "dinner", and add a .hidden class to them.

const form = document.forms['choice-form'];

const isSelectionEmpty = select =>
  (vals => vals.length === 0 || (vals.length === 1 && vals[0] === ''))
  (selectedValues(select));

const selectedValues = select =>
  [...select.selectedOptions].map(({ value }) => value);

const handleMealChange = e => {
  const
    isEmpty = isSelectionEmpty(e.target),
    allowList = selectedValues(e.target);
    
  document.querySelectorAll('div[data-platform]')
    .forEach(div =>
      div.classList.toggle('hidden', !isEmpty &&
        !allowList.includes(div.dataset.platform)));
};

form.elements.meal.addEventListener('change', handleMealChange);

// Alternatively
//document.querySelector('select[name="meal"]')
//  .addEventListener('change', handleMealChange);

.hidden {
  display: none;
}

<form name="choice-form">
  <select name="meal" multiple>
    <option value="" selected></option>
    <option value="breakfast">Breakfast</option>
    <option value="lunch">Lunch</option>
    <option value="dinner">Dinner</option>
  </select>
</form>
<hr />
<div data-platform="dinner" class="product">Dinner</div>
<div data-platform="lunch" class="product">Lunch</div>

edited Apr 06 '21 at 19:16

answered Apr 06 '21 at 17:50

Mr. Polywhirl

42,981
12
84
132

I want to do it with JS – NilsVonBismarck Apr 06 '21 at 17:51
No need to use `filter` when you can specify the value in the selector... Also, that's the same as the answers to the proposed duplicate. – Heretic Monkey Apr 06 '21 at 17:56
When I have like 5 things for the datalist and I choose one how can I hide all but not this one which I have selected? @Mr.Polywhirl – NilsVonBismarck Apr 06 '21 at 17:59
@NilsVonBismarck What is to be shown and what is to be hidden? – Mr. Polywhirl Apr 06 '21 at 18:00
@Mr.Polywhirl e.g. I have 3 of the divs and each of them with different content and I select one of them e.g. in a selecter and I just want to see the div with this content. Like 3 div with food, fun, drink and I choose fun and I just see fun. – NilsVonBismarck Apr 06 '21 at 18:02
@NilsVonBismarck You can use an "allow list" to tell the application which things to display. This list can be derived from a ` – Mr. Polywhirl Apr 06 '21 at 18:05
@Mr.Polywhirl I have a selecter but I want that I can read this selecter and just show the selected word – NilsVonBismarck Apr 06 '21 at 18:12
Huuuuuuuge thanks @Mr.Polywhirl . But one little question if its okay. When I have more than one element with e.g. lunch how does it works? – NilsVonBismarck Apr 06 '21 at 19:00
@NilsVonBismarck If the first option is selected (no choice), all will show, but once you select one or more items, any item in that selection will be shown. – Mr. Polywhirl Apr 06 '21 at 19:02
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/230819/discussion-between-nilsvonbismarck-and-mr-polywhirl). – NilsVonBismarck Apr 06 '21 at 19:06
@Mr.Polywhirl I know I know but when I take your code there gets the error "Uncaught ReferenceError: form is not defined" but why there is a form? – NilsVonBismarck Apr 06 '21 at 19:10
@NilsVonBismarck I wrapped by `` and ` well formed without a
?_"](https://stackoverflow.com/questions/3294572/is-input-well-formed-without-a-form). Anyways, I added an alternative selector for you, in the case where you do not have a `
`.
– Mr. Polywhirl Apr 06 '21 at 19:12
@Mr.Polywhirl Sorry there is a typo i mean why there comes a error when there is a form – NilsVonBismarck Apr 06 '21 at 19:16
@Mr.Polywhirl I know its okay but look at this I copied your code but there its not working. https://codepen.io/NilsTheDev/pen/YzNxJVg – NilsVonBismarck Apr 06 '21 at 19:21

score 0 · Answer 2 · answered Apr 06 '21 at 17:58

<div data-platform="dinner" class="product">Dinner</div>
<div data-platform="lunch" class="product">Lunch</div>

I want to hide all data-platform which are "dinner".

JQuery Solution:

$('.product').each(function(){
  var sData = $(this).data('platform');
  if(sData == 'dinner'){
     $(this).hide();
  }

});

How can I hide element with the data-xxx attribute in javascript?

2 Answers2

Pure CSS

With JavaScript