Styjun

I need to disable, deactivate or at least hide a dropdown item called Private request and I can only use CSS or Javascript to do so.

When I inspect the dropdown item it has the class a.js-dropdown-list. But every item in my dropdown has this class. So I can't just use display: none; because it will hide all options. Is there no more specific ID for every item in the drop down or can I deactivate items with Javascript?

Drop Down looks like this:

Here the code (1st block is for the picker field, 2nd for the drop-down menue):

<div id="js-organization-picker">
 <sd-select class="js-share-with-organisation-picker is-private" data-type="link" data-id="customfield_10203" data-value="38" data-options="[&quot;label&quot;:&quot;Private request&quot;,&quot;styleClass&quot;:&quot;is-private&quot;,&quot;icon&quot;:&quot;locked&quot;,&quot;label&quot;:&quot;Share with Testorganisation&quot;,&quot;value&quot;:38,&quot;icon&quot;:&quot;unlocked&quot;]" resolved="">
 <a id="js-customfield_10203-dropdown-trigger" class="aui-dropdown2-trigger aui-button aui-button-link js-trigger customfield_10203-trigger select-dropdown-trigger aui-alignment-target aui-alignment-element-attached-top aui-alignment-element-attached-left aui-alignment-target-attached-bottom aui-alignment-target-attached-left active aui-dropdown2-active aui-alignment-enabled" aria-controls="customfield_10203-dropdown" aria-haspopup="true" role="button" tabindex="0" data-aui-trigger="" data-dropdown2-hide-location="js-customfield_10203-dropdown-container" resolved="" aria-expanded="true" href="#customfield_10203-dropdown">
 <span class="aui-icon aui-icon-small aui-iconfont-locked">
 : : before
 </span> Private request
 : : after
 </a>
 <input name="customfield_10203" type="hidden" class="js-input" value="">
 <div id="js-customfield_10203-dropdown-container" class="hidden"></div>
 </sd-select>
</div>


<div id="customfield_10203-dropdown" class="aui-dropdown2 filter-dropdown aui-style-default js-filter-dropdown select-dropdown aui-layer aui-alignment-element aui-alignment-side-bottom aui-alignment-snap-left aui-alignment-element-attached-top aui-alignment-element-attached-left aui-alignment-target-attached-bottom aui-alignment-target-attached-left aui-alignment-enabled" role="menu" aria-hidden="false" data-id="customfield_10203" resolved="" style="z-index: 3000; top: 0px; left: 0px; position: absolute; transform: translateX(602px) translateY(918px) translateZ(0px);" data-aui-alignment="bottom auto" data-aui-alignment-static="true">
 <div role="application">
 <ul class="aui-list">
 <li>
 <a class="js-dropdown-item " href="#">Private request</a>
 </li>
 <li></li>
 <li>
 <a class="js-dropdown-item " href="#" data-value="38">Share with Testorganisation</a>
 </li>
 <li></li>
 </ul>
 </div>
</div>

E.g. you could give the dropdown item ids to identify them. In HTML this would look like this: <p id="yourIdHere"></p>

You can access this item through Javascript using the document.getElementById() function like this: document.getElementById('yourIdHere').style.display = 'none';

If you can't edit the existing html code, youi have to get the element by it's name/value. This is a bit difficult. You have to iterate through all elements of that type and evaluate each name/value. If you have found the one, you was looking for, you can edit/hide it. You would do so (untested):

var elements = document.getElementsByTagName('div'); //div will be the name of the tag of your elements in the dropdown list 
var length = elements.length;
for (var i=0, item; item = elements[i]; i++) 
 if(item.value == "Private request") //"Private request" is the name of the element we are looking for
 item.style.display = 'none'; //Hide the element
 

You could loot trough all 'js-dropdown-items', check its innerText for 'Private request' and set its parentNodes display-property to 'none':

var list = document.getElementsByClassName('js-dropdown-item');
for(var i = 0; i < list.length; i++)
 if(list[i].innerText === 'Private request') list[i].parentNode.style.display = 'none';

<ul class="aui-list">
 <li>
 <a class="js-dropdown-item " href="#">Private request</a>
 </li>
 <li></li>
 <li>
 <a class="js-dropdown-item " href="#" data-value="38">Share with Testorganisation</a>
 </li>
 <li></li>
</ul>

VannillaJS Solution document.querySelectorAll(".aui-list > li")[0].style.display = "none";

Welcome!

If I get you right there are plenty of elements with the same ID js-dropdown-list and you want to hide a specific one and there is no additional class for the element and you're not allowed to add specificity to it, let's say by adding of an additional class, you can do the following:

Grab all elements with this id by:

let elements = document.querySelectorAll('.js-dropdown-list'); // this is an array of these elements

let elementToHide = elements[n] // whene n is the number of that element

//hiding the element
elementToHide.style.display = 'none';

Hope that helps!

NOTE: I believe you will have to actually hide it OR use whatever you are using for this pseudo drop down (there was no reference in the question) to manage the disabled state if it provides that. Reference: https://www.w3.org/TR/2014/REC-html5-20141028/disabled-elements.html

Get the element by its text and then hide it. Might need the parent but this directly answers the question. Note this could all be wrapped in a function and then called from where you wish.

function HideByText(elId, findText) 
 let group = document.getElementById(elId).getElementsByClassName('js-dropdown-item');
 let found = Array.prototype.filter.call(group, function(el) 
 return el.innerText === findText;
 );
 found.forEach(function(el) 
 el.style.display = 'none';
 );
 return found;// in case you need the elements ref.


let foundFiltered = HideByText('customfield_10203-dropdown', 'Private request');

<div id="customfield_10203-dropdown" class="aui-dropdown2 filter-dropdown aui-style-default js-filter-dropdown select-dropdown aui-layer aui-alignment-element aui-alignment-side-bottom aui-alignment-snap-left aui-alignment-element-attached-top aui-alignment-element-attached-left aui-alignment-target-attached-bottom aui-alignment-target-attached-left aui-alignment-enabled"
 role="menu" aria-hidden="false" data-id="customfield_10203" resolved="" data-aui-alignment="bottom auto" data-aui-alignment-static="true">
 <div role="application">
 <ul class="aui-list">
 <li>
 <a class="js-dropdown-item " href="#">Private request</a>
 </li>
 <li></li>
 <li>
 <a class="js-dropdown-item " href="#" data-value="38">Share with Testorganisation</a>
 </li>
 <li></li>
 </ul>
 </div>
</div>

Alternate for parent would be:

Change el.style.display = 'none'; to

if (node.parentElement) 
 el.parentElement.style.display = 'none';