Javascript: Select 元素的父元素并将其隐藏

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>

我想要 select 第一个 Div 作为子元素的应答器，其特定数据产品 ID 为 10496。我不能使用 Css 因为还有 2 个 div 具有相同的类.

谢谢

Answer 1

为该父项添加一个易于识别的 class。说 product
使用属性选择器[]通过data-*
使用.closest()
如果找到 - 使用 Element.classList 和 .add() 方法将 "is-hidden" 之类的 class 分配给 .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>

Javascript: Select 元素的父元素并将其隐藏

Javascript: Select parent of an element and make it hidden

javascript

parent

parent-child