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，它的子元素是应答器，其特定的 data-product-id 为 10496。 我无法使用 Css，因为还有另外 2 个具有相同类的 div。

谢谢

Answer 1

• 为该父类添加一个很好识别的类。说产品
• 使用属性选择器[]通过data-*查找所需元素
• 使用.closest()
• 如果找到 - 使用 Element.classList 和 .add 将 "is-hidden" 等类分配给 .product ()方法:

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>