Este seletor de consulta não funciona neste HTML. Funciona em CSS. Alguém pode me dizer a solução correta?
Basicamente, estou usando uma versão mais antiga da tabela de materiais e desejo ocultar a opção "Exportar como PDF". Eu sei que a versão mais recente permite isso na opção 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();
Você precisa do JQuery para usar o :contains()Seletor
$('td:contains("male")')
Além disso, não há segmentação de seletor CSS em textContent . Dê uma olhada na lista completa de seletores CSS3
Precisamos de outro método aqui:
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);
Agora você tem o elemento correto.
Para ocultar um objeto, você NÃO deve removê-lo! Você pode simplesmente alterar a displaypropriedade do elemento:
find.style.display = "none";
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras