Javascript: выберите родителя элемента и сделайте его скрытым

Question

<div class="col-lg-4 col-sm-6 col-md-4 col-xs-12">

  (I want to select this div and make it hidden)
  
  <div class="ad-pric-content">
    <div class="ad-pic-style" />
    <div class="ad-pric-detail">
      <div class="col-lg-12 no-padding prod-fancy-btn">
        <a href="javascript:void(0);"
           class="btn btn-theme sb_add_cart"
           data-product-id="10496"
           data-product-qty="1">Sélectionnez le plan</a>
      </div>
    </div>
  </div>
</div>

Я хочу выбрать первый Div, который имеет в качестве дочернего элемента balise с указанным c data-product-id 10496. Я не могу использовать Css потому что есть еще 2 div с такими же классами.

Спасибо

Answer 1

• Добавить хороший узнаваемый класс для этого родителя. Скажите product
• Используйте селектор атрибутов [], чтобы найти нужный элемент по data-*
• используйте .closest()
• Если найдено - назначьте класс, например "is-hidden" до .product с использованием Element.classList и .add() Метод:

const prID = "10496";
const EL_prID = document.querySelector(`[data-product-id="${prID}"]`);

if (EL_prID) {
  EL_prID.closest('.product').classList.add('is-hidden');
}

.is-hidden { display:none; }

<div class="product col-lg-4 col-sm-6 col-md-4 col-xs-12">
  (I want to select this div and make it hidden)
  <div class="ad-pric-content">
    <div class="ad-pic-style" />
    <div class="ad-pric-detail">
      <div class="col-lg-12 no-padding prod-fancy-btn">
        <a href="javascript:void(0);"
           class="btn btn-theme sb_add_cart"
           data-product-id="10496"
           data-product-qty="1">Sélectionnez le plan</a>
      </div>
    </div>
  </div>
</div>