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，它以这个特定的数据产品 ID 10496 作为应答器的子元素。 我不能使用 Css，因为还有另外 2 个具有相同类的div。

谢谢

Answer 1

• 向该父级添加一个漂亮的可识别类。说product
• 使用属性选择器[]按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>