Can someone tell me why this doesn’t work? (javascript html node selector)

This query selector doesn’t work on this HTML. It works in CSS. Can anyone tell me the correct solution?

Basically, I am using an older version of the material table and want to hide the “Export as PDF” option. I know the newer version allows it in exportButton option.

<div
  class="MuiPaper-root MuiMenu-paper MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded"
  tabindex="-1"
  style="
    opacity: 1;
    transform: none;
    transition: opacity 215ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
      transform 143ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    top: 181px;
    left: 1754px;
    transform-origin: 0px 19.5px;
  "
>
  <ul
    class="MuiList-root MuiMenu-list MuiList-padding"
    role="menu"
    tabindex="-1"
  >
    <li
      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
      tabindex="0"
      role="menuitem"
      aria-disabled="false"
    >
      Export as CSV<span class="MuiTouchRipple-root"></span>
    </li>
    <li
      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
      tabindex="-1"
      role="menuitem"
      aria-disabled="false"
    >
      Export as PDF<span class="MuiTouchRipple-root"></span>
    </li>
  </ul>
</div>

document.querySelectorAll("ul.MuiMenu-list li:contains('Export as PDF')")[0].remove();

Answer

You need JQuery to use the :contains() Selector

$('td:contains("male")')

Also there is no CSS selector targeting on textContent. Take a look at full list of CSS3 Selectors

We need another method here :

function querySelectorIncludesText(selector, text) {
    return Array.from(document.querySelectorAll(selector)).find((el) =>
        el.textContent.includes(text)
    );
}

const find = querySelectorIncludesText("li", "Export as PDF");

console.log(find);

Now you have the correct element.

To hide an object you should NOT remove that ! You can simply change display property of element :

find.style.display = "none";