2

enter image description herei need to hide a block of <button> element in context menu (display:none) if child of <button> have text <span trans"">Remove</span>.

<div id="cdk-overlay-0" class="cdk-overlay-pane context-menu-overlay" style="pointer-events: auto; position: static;">
    <drive-context-menu class="context-menu">
        <context-actions-container>
            <!---->
            <!---->
            <!---->
            <!---->
            <!---->
            <button class="context-menu-item ng-star-inserted">
                <mat-icon class="mat-icon notranslate mat-icon-no-color" role="img" aria-hidden="true">

                    <span trans="">Preview</span>
            </button>
            <!---->
            <!---->
            <!---->
            <!---->
            <!---->
            <!---->
            <!---->
            <button class="context-menu-item ng-star-inserted">
                <span trans="">Aggiungi al mio drive privato</span>
            </button>
            <!---->
            <!---->
            <!---->
            <!---->
            <!---->
            <!---->
            [..........]
        </context-actions-container>
    </drive-context-menu>
</div>

I try next example of css and all of this rules hide all of menus item (button) but i wont hide a single if have text specific. 

div[id^="cdk-overlay-"] .context-menu context-actions-container button {
    display: none;
}

button.context-menu-item.ng-star-inserted  {
    display: none;
}
.context-menu { 
      display: none;
}

.context-menu-item .ng-star-inserted {
    display: none;
}
davidebr90
  • 43
  • 7
  • 2
    please try to be more specific. and share what you have tried. – Rnayak Jan 18 '20 at 05:54
  • 1
    This is not possible with CSS alone -> [Is there a CSS selector for elements containing certain text?](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) – Andreas Jan 18 '20 at 05:59
  • I need to hide a button if inside the block button i have span with specific content in block. – davidebr90 Jan 18 '20 at 18:39

2 Answers2

2

you can display none using jQuery please try below code to display none button if span have "Remove" 

<script type="text/javascript">
  $(document).ready(function(){
    $('.context-menu span').each(function () {      
      if($(this).html()==='Remove'){
        $(this).parents('button').css("display","none");
      }
    });   
  })
</script>

For above code you need reference jQuery in your webpage (if you have already jquery then no need to reference)
Hope this work :)

Mohsin Marui
  • 459
  • 2
  • 8
1

One approach to achieve this effect is to:

  • add the declaration: .remove {display: none;} to the stylesheet
  • search for the right sort of button using javascript
  • add the class .remove to every button which matches all the conditions

Working Example:

const contextMenuButtons = [... document.getElementsByClassName('context-menu-item')];

for (contextMenuButton of contextMenuButtons) {

  if (contextMenuButton.getElementsByTagName('span')[0].textContent === 'Remove') {

    contextMenuButton.classList.add('remove');
  }
}
.remove {
  display: none;
}
<button class="context-menu-item ng-star-inserted">
  <span trans="">Aggiungi al mio drive privato</span>
</button>

<button class="context-menu-item ng-star-inserted">
  <span trans="">Remove</span>
</button>
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • Thanks for message..i try this script but not working to span or button ! – davidebr90 Jan 18 '20 at 20:13
  • I update first message in this topic to clarify the problem... – davidebr90 Jan 18 '20 at 20:22
  • When you run the code snippet above, you will see that `` has the style `display: none` applied to it. – Rounin Jan 18 '20 at 20:49
  • i know, but in website not working. Script is correctly loaded in page, but dont add class .remove to nothing .. – davidebr90 Jan 18 '20 at 21:12
  • I found the problem...your code not working because the element – davidebr90 Jan 22 '20 at 20:26
  • You need to contain the code in a function and then invoke the function at the right time. – Rounin Jan 22 '20 at 20:30