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

Question

如果<button> 的子元素有文本<span trans"">Remove</span>，我需要在上下文菜单中隐藏<button> 元素块（显示：无）。

<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

你可以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那么不需要引用）
希望这项工作:)

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>