Я использую jQuery 3.7.1 для поиска нескольких вхождений диапазона с классом «модифицированный» и, если обнаружено, что он удаляет вложение, имеющее класс «элемент».
Раньше это работало до теневого корня и закрывало все экземпляры, найденные в HTML....
$("span.modified").closest("div.item").remove();
но больше не делает. Я пытался ....
$("span.modified").shadowRoot.closest("div.item").remove();
но и тут не повезло. Ниже приведен пример кода, в котором я ищу диапазон внутри открытого теневого корня и пытаюсь удалить включающий div, который не находится в теневом корне. Я только недавно узнал о теневом корне и озадачен. Любые указатели в правильном направлении будут очень признательны. Кроме того, я пытаюсь воспроизвести исходную функциональность поиска всех интервалов на странице, которые могут содержать «измененные», и закрытия всех включающих div с помощью класса «item».
<div class = "item">
<a href = "<SOME_LINK_HERE>" target = "_blank">
<x-cover volume = "Test" id = "23310203">
#shadow-root (open)
<div class = "show" id = "div">
<span class = "modified">Modified</span>
</div>
</x-cover>
</a>
</div>
Обновление: только что узнал, что jQuery не способен проникать в теневой DOM, поэтому решение кажется чем-то вроде....
Я, конечно, сообщу решение, если найду его.
remove()
удаляет все дочерние узлы, это то, что вам нужно? убрать <x-cover>
тоже?
@ Дэнни'365CSI'Энгельман. Да, и в этом-то и трудность. jQuery не способен проникнуть в теневой корень и найти совпадение. Похоже, проблема заключается в резервном копировании обхода DOM для устранения <div>, даже если для сопоставления используется простой JavaScript. В приведенном примере предтеневой корень, т. е. $("span.modified").closest("div.item").remove();, работает как чемпион.
Использование DSD - Декларативный ShadowDOM shadowrootmode = "open"
здесь, чтобы создать его <x-cover>
<div class = "item">
<a href = "<SOME_LINK_HERE>" target = "_blank">
<x-cover volume = "Test" id = "23310203">
<template shadowrootmode = "open">
#shadow-root (open)
<div class = "show" id = "div">
<span class = "modified">Modified</span>
</div>
</template>
</x-cover>
</a>
</div>
<script>
// delete class = "item" having class = "modified" in shadowRoot
let x = document.body.querySelector("x-cover");
console.info(x);
let modified = x.shadowRoot.querySelector("span.modified");
console.info(modified);
let host = modified.getRootNode().host; // same as x here
console.info(host);
let div = host.closest("div.item");
console.info(div);
// div.remove();
</script>
Если вам нужно обработать несколько элементов с помощью ShadowRoot, вам придется погрузиться в структуру DOM и обрабатывать каждый из них индивидуально.
const shadowDive = (
el,
selector,
match = (m, r) => console.warn('match', m, r)
) => {
let root = el.shadowRoot || el;
root.querySelector(selector) && match(root.querySelector(selector), root);
[...root.children].map(el => shadowDive(el, selector, match));
}
во фрагменте stackoverflow ваш простой код запускается с помощью
$("span.modified").closest("div.item").remove();