如何在 javascript 中隐藏具有 data-xxx 属性的元素？

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".

Answer 1

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>

Answer 2

<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();
  }

});