Доброго времени суток товарищи.
Имеется такой скрипт из расширения для браузера Stylus
@-moz-document url("https://store.steampowered.com/account/history/") {
#main_content > table > tbody > tr:has(td.wht_items[data-tooltip-text="Подробная история Торговой площадки"]) *
{
font-size: 0px;
height: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
}
И он частично выполняет нужное мне задание. Этот скрипт применяет стиль к тегу, и ко всем вложенным тегам, если внутри одного из них есть искомый текст. А хотелось бы большего. Но если я правильно все понимаю, в CSS нет селектора который бы позволял извлекать содержимое тега. А именно это мне и нужно. По этому этот скрипт нужно воссоздать в расширении Tempermonkey или ему подобном. Я пришел к такому коду
(function() {
'use strict';
const parent = document.querySelector("#main_content > table");
if (parent) {
let divCount = 0;
function processNewElements() {
const divs = parent.querySelectorAll(':scope > tbody > tr > td.wht_items');
const newDivCount = divs.length;
if (newDivCount > divCount) {
divCount = newDivCount;
for (const div of divs) {
if (div.innerText.includes("Торговая площадка Steam")) {
div.style.fontSize = '0px';
div.style.height = '0px';
div.style.paddingTop = '0px';
div.style.paddingBottom = '0px';
}
}
}
}
const observer = new MutationObserver(function(mutations) {
for (const mutation of mutations) {
if (mutation.addedNodes.length) {
processNewElements();
}
}
});
observer.observe(parent, {
childList: true,
subtree: true
});
processNewElements();
}
})();
Этот скрипт делает похожее но не тоже самое. Он находит нужный текст и применяет стиль к тому тегу в котором его нашел. А нужно на порядок выше. И я не знаю как это сделать. Я полный ноль в JS и в Tempermonkey. К слову CSS я тоже не изучал, но нулевых знаний в CSS достаточно для Stylus.
Что нужно изменить в данном коде что бы он заработал так как нужно?
Дополнение
Моя вторая попытка в код чуть более успешная
(function() {
'use strict';
const parent = document.querySelector("#main_content > table > tbody");
if (parent) {
let divCount = 0;
function processNewElements() {
const divs = parent.querySelectorAll(':scope > tr');
const newDivCount = divs.length;
if (newDivCount > divCount) {
divCount = newDivCount;
let num = 1;
for (const div of divs) {
//тут строка не влезла -->
if (document.querySelector("#main_content > table > tbody > tr:nth-child(" + num + ") > td.wht_items").innerText.includes("Торговая площадка Steam")) {
div.style.fontSize = '0px';
div.style.height = '0px';
div.style.paddingTop = '0px';
div.style.paddingBottom = '0px';
}
num++
}
}
}
const observer = new MutationObserver(function(mutations) {
for (const mutation of mutations) {
if (mutation.addedNodes.length) {
processNewElements();
}
}
});
observer.observe(parent, {
childList: true,
subtree: true
});
processNewElements();
}
})();
Этот код применяет стиль к тегу, если внутри одного из вложенных тегов есть искомый текст. А как сделать что бы стиль применялся не только к главному, но и всем вложенным тегам? В Stylus достаточно добавить * в конце селектора. А в JS как того же результата добиться?
Тут понял что я все еще мыслю в рамках CSS. Для скрытия нежелательного элемента уменьшаю его размеры. А ведь в JS наверно его просто удалить можно с концами? Только вот `div.remove();` почему то ничего не делает...