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

Question

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

My HTML code:

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

Do you want the <a> to always be hidden when that's the data attribute, or do you only want it to occur conditionally? — CertainPerformance
– CertainPerformance, Commented Feb 1, 2020 at 8:11

CertainPerformance · Accepted Answer · 2020-02-01 08:13:52Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related