有人可以告诉我为什么这不起作用吗？ （javascript html 节点选择器）

Question

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 1

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