Выбрать весь контейнер div из глубокого дочернего элемента в DOM - PullRequest
Новая
       75

Выбрать весь контейнер div из глубокого дочернего элемента в DOM

1 голос
/ 20 июня 2020

Есть ли способ настроить таргетинг на большой контейнерный div на основе существующего дочернего элемента глубоко внутри его DOM-дерева?

В следующем примере - можем ли мы скрыть blockA на основе того факта, что дочерний элемент blockA имеет глубокий дочерний элемент с идентификатором targetA? 

  <div class="blockA">
    <span class="title">BlockA</span>
    <div>
      <p id="targetA">
        Delete this whole block, please
        this is a paragraph,
        lorem ipsum
      </p>
    </div>
  </div>
  <div class="blockB">
    <span class="title">BlockB</span>
    <div>
      <p>
        this is a paragraph,
        lorem ipsum
      </p>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 20 июня 2020

Вы можете использовать Element.closest () 

child.closest('.parent')

From MDN

Метод closest () просматривает элемент и его родительские элементы (заголовок к документу root), пока не найдет узел, соответствующий предоставленной строке селектора. Вернет себя или соответствующего предка. Если такого элемента не существует, возвращается значение null.

Вы можете скрыть элемент .blockA, выбрав элемент #targetA, вызвав для него метод closest и передав имя класса родительского элемента . 

document.getElementById('targetA').closest('.blockA').style.display = 'none';

PS вы можете защитить себя от closest возврата функции null.

Демо: 

const target = document.getElementById('targetA');
const button = document.querySelector('button');

button.addEventListener('click', () => {
  const parent = target.closest('.blockA');
  if (parent) parent.style.display = 'none';
});
.blockA,
.blockB {
  background: #fafafa;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  margin: 10px 0;
}
p { margin: 0; }
.blockA, .blockB, button { padding: 10px; }
<div class="blockA">
  <span class="title">BlockA</span>
  <div>
    <p id="targetA">
      Delete this whole block, please this is a paragraph, lorem ipsum
    </p>
  </div>
</div>
<div class="blockB">
  <span class="title">BlockB</span>
  <div>
    <p>this is a paragraph, lorem ipsum</p>
  </div>
</div>
</div>

<button>Hide BlockA</button>
...