如果子元素內容文本，則隱藏父塊（顯示：無）

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的請嘗試以下代碼顯示無按鈕，如果跨度有“刪除”

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