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

【问题标题】：Can someone tell me why this doesn't work? (javascript html node selector)有人能告诉我为什么这不起作用吗？（javascript html 节点选择器）
【发布时间】：2021-08-05 07:24:23
【问题描述】：

此查询选择器不适用于此 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();

【问题讨论】：

请提供更多信息。您已将 React.js 添加到此帖子的标签列表中，但我没有看到您实际使用它的任何参考。它可以是任何东西。如果您使用的是 react.js，那么您应该将 class 替换为 className，因为我们在 React 中这样做
这对你有帮助吗stackoverflow.com/questions/37098405/…
我从浏览器中选择了这个 html。我不能使用 css 来执行此操作，因为： 1. 这里使用的 css 类也用于其他任何地方以及下拉菜单。 2.我不能给这个添加id或者新的class。
react jsx 代码在材料表 node_modules 文件中。

标签： javascript html

【解决方案1】：

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

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

也没有CSS selector targeting on textContent。查看CSS3 Selectors的完整列表

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

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

现在你有了正确的元素。

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

find.style.display = "none";

【讨论】：