Удаление включающего класса div с помощью jQuery при сопоставлении с открытым теневым корнем

Я использую 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, поэтому решение кажется чем-то вроде....

  1. Используйте jQuery, чтобы найти все элементы x-cover.
  2. Перебирайте эти элементы и используйте ванильный JavaScript для доступа. их теневые DOM.
  3. Внутри теневого DOM найдите элементы диапазона с измененным классом.
  4. Для каждого найденного промежутка перейдите к элементу div.item и удалите его.

Я, конечно, сообщу решение, если найду его.

во фрагменте stackoverflow ваш простой код запускается с помощью $("span.modified").closest("div.item").remove();

jeremy-denis 13.03.2024 17:10

remove() удаляет все дочерние узлы, это то, что вам нужно? убрать <x-cover> тоже?

Danny '365CSI' Engelman 13.03.2024 18:42

@ Дэнни'365CSI'Энгельман. Да, и в этом-то и трудность. jQuery не способен проникнуть в теневой корень и найти совпадение. Похоже, проблема заключается в резервном копировании обхода DOM для устранения <div>, даже если для сопоставления используется простой JavaScript. В приведенном примере предтеневой корень, т. е. $("span.modified").closest("div.item").remove();, работает как чемпион.

Jane Wilkie 13.03.2024 20:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Использование 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));
  }

Другие вопросы по теме