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

Question

此查询选择器不适用于此 HTML。 它适用于 CSS。 谁能告诉我正确的解决方案？

基本上，我使用的是旧版本的材料表，并希望隐藏“导出为 PDF”选项。 我知道较新的版本允许它在 exportButton 选项中。

<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

您需要JQuery才能使用:contains()选择器

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

也没有针对 textContent 的 CSS 选择器。 查看CSS3 选择器的完整列表

我们这里需要另一种方法：

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

现在你有了正确的元素。

要隐藏 object，您不应该删除它！ 您可以简单地更改元素的display属性：

find.style.display = "none";