CODEWITHSUNDEEP
javascriptjqueryhtml
Abhijit Kumbhar
Abhijit Kumbhar

Reputation: 961

How to hide data-attribute when the value of attribute is something

I want to hide the link field button when the value of the button equals to 'Work Order' see the image below.

enter image description here

My HTML code:

enter image description here

I tried this $("li[data-label='Work Order']").hide() but didn't worked.

Upvotes: 0

Views: 1669

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370639

The li is not the same element as the one with the data-label attribute. If you want to hide the <a> inside, use the selector string a[data-label='Work%20Order']:

$("a[data-label='Work%20Order']").hide()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-label="Work%20Order">link</a>

You do need to use the %20 inside the selector.

If you want to always hide such an element, you can achieve this with CSS alone - no need for jQuery or any Javascript at all. Use the same selector string plus display: none:

a[data-label='Work%20Order'] {
  display: none;
}
<a data-label="Work%20Order">link</a>

If you want to hide the whole <li> container when one of its children has such an attribute, then select each of those elements with jQuery and call .parent() on it:

$("a[data-label='Work%20Order']").parent().hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <a data-label="Work%20Order">link</a>
  </li>
  <li>
    <a>link 2</a>
  </li>
  <li>
    <a data-label="Work%20Order">link 3</a>
  </li>
</ul>

Upvotes: 2

Related Questions