如果子元素内容文本隐藏父块（显示：无）

Question

如果<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示例，所有这些规则都隐藏了所有菜单项（按钮），但是如果有特定于文本的内容，我将不会隐藏任何菜单项。

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

Answer 1

您可以使用jQuery display none，如果范围有“删除”，请尝试下面的代码不显示任何按钮

<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，则无需引用）希望这项工作：）

Answer 2

实现此效果的一种方法是：

• 将声明：.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>