Удалить элементы, которые содержит в себе ссылку

Есть главная страница ютуба где содержится видео от разных авторов. Сами видео содержатся в контейнерах с классами "style-scope ytd-rich-grid-renderer". Нужно удалить только те контейнеры которые имеют в себе дочерний элемент в виде ссылки с адресом href="название канала", которые будут браться из массива. Также, при прокрутке страницы и загрузке новых каналов скрипт также должен работать.

Скрипт думаю засунуть в расширение для хрома, либо использовать его с помощью userscript.

P.S По сути это костыльный специфический адблок для ютуба, но адблок скрывает элементы, что нагружает комп. Мне нужно именно удалить их из doom. Правило для адблока, чтобы решить эту задачу - ##.style-scope.ytd-rich-grid-row > :has([href="/c/VladimirGav"])


Ответы (1 шт):

Автор решения: SergeyPopov

Если кому-то может понадобиться такая специфичная задача. MutationObserver нужен для того, чтобы отслеживать изменения и при подгрузке новых видео их тоже обрабатывал скрипт и удалялись от ненужных авторов. Сам крипт в tampermonkey, чтобы не писать свой костыль в виде расширения. Теперь пользуюсь вместо адблока, так как скрипт удаляет элементы dom, а не скрывает их.

let listDeletes = [
    "/chennal/somestuff1",
    "/chennal/somestuff2",
    "/chennal/somestuff3",
    "/chennal/somestuff4",
    "/chennal/somestuff5",
    "/chennal/somestuff6",
    "/chennal/somestuff7",
    "/chennal/somestuff8",
    "/chennal/somestuff9",
];

function delBoxes() {

    for (let i = 0; i < listDeletes.length; i++) {
        document.querySelectorAll(`li a[href^="${listDeletes[i]}"`).forEach(e => e.closest('li').remove());
    }
}
delBoxes();

const observer = new MutationObserver(function (mutation) {
    mutation.forEach(function (mutation) {
        if (mutation.addedNodes.length) {
            delBoxes();
        }
    })
});
const playlistWrapper = document.querySelector('#videoPlaylist');
observer.observe(playlistWrapper, {
    childList: true
})
→ Ссылка