Скрыть родительский блок (отображать: нет), если текст содержимого дочернего элемента - PullRequest
Новая
       2

Скрыть родительский блок (отображать: нет), если текст содержимого дочернего элемента

2 голосов
/ 18 января 2020

enter image description here мне нужно скрыть блок элемента <button> в контекстном меню (отображение: отсутствует), если дочерний элемент <button> имеет текст <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>

Я пробую следующий пример css, и все эти правила скрывают все элементы меню (кнопки), но я не скрою ни одного, если у них указан текст c. 

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

Ответы [ 2 ]

2 голосов
/ 18 января 2020

вы можете display none, используя jQuery, пожалуйста, попробуйте следующий код, чтобы не отображать ни одной кнопки, если span имеет «Удалить» 

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

Для вышеуказанного кода вам нужна ссылка jQuery на вашей веб-странице (если вы уже jquery, тогда нет необходимости ссылаться)
Надеюсь, что эта работа:)

1 голос
/ 18 января 2020

Один из способов достижения этого эффекта заключается в следующем:

  • добавить объявление: .remove {display: none;} в таблицу стилей
  • найти правильный тип кнопки, используя javascript
  • добавить класс .remove к каждой кнопке, которая соответствует всем условиям

Рабочий пример: 

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