使用javascript按类选择具有特定子元素的元素

我有一个产品列表，其结构类似于下面的HTML

我试图用

class=“www组件菜单产品列表--item_DgfZL”

选择包含类名为

class=“www组件产品卡--cbd_2luC9”的元素

然后我想在单击函数中隐藏这些元素

请注意。我在页面上有很多这样的项目，函数应该应用于所有潜在的元素，而不仅仅是我在示例中的两个

我已经理解了如何使用Jquery实现这一点，但我在这里试图避免使用Jquery

这是我对javascript的尝试

var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL");

for (i = 0; i < itemClass.length; i++) {

      var insideItemClass = itemClass.getElementsByClassName("www-components-product-card--hybrid_2AD7v");

        for (i = 0; i < insideItemClass.length; i++) {

            insideItemClass.style.display = "none";

        }

}

var itemClass=document.getElementsByClassName（“www组件菜单产品列表--item_DgfZL”）；
对于（i=0；i

HTML结构：

<div class="www-components-menu-product-list--item_DgfZL">

    <div class="www-components-product-card--card_2mjWk">


        <div>

            <div class="www-components-product-card--hybrid_2AD7v www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">

            </div>


            <div class="www-components-product-card--description_3un8n" style="height: 38%;">

            </div>

        </div>

    </div>

</div>


<div class="www-components-menu-product-list--item_DgfZL">

    <div class="www-components-product-card--card_2mjWk">


        <div>

            <div class="www-components-product-card--cbd_2luC9 www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">

            </div>


            <div class="www-components-product-card--description_3un8n" style="height: 38%;">

            </div>

        </div>

    </div>

</div>




<div class="www-components-menu-product-list--item_DgfZL">

    <div class="www-components-product-card--card_2mjWk">


        <div>

            <div class="www-components-product-card--cbd_2luC9 www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">

            </div>


            <div class="www-components-product-card--description_3un8n" style="height: 38%;">

            </div>

        </div>

    </div>

</div>



我的错误

01:26:25.549 menubest.html:2923 Uncaught TypeError: itemClass.getElementsByClassName is not a function
    at HTMLDivElement.<anonymous> (menubest.html:2923)

01:26:25.549 menubest.html:2923未捕获类型错误：itemClass.getElementsByClassName不是函数
在HTMLDEVELENT。（menubest.html:2923）
使用以下方法：

itemClass[i].getElementsByClassName
insideItemClass[i].style.display = "none"; 

而不是

itemClass.getElementsByClassName
insideItemClass.style.display = "none";

完整代码：

    var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL");

for (i = 0; i < itemClass.length; i++) {

      var insideItemClass = itemClass[i].getElementsByClassName("www-components-product-card--hybrid_2AD7v");

      if(insideItemClass.length > 0){
        itemClass.item(i).style.display = "none";
      }
}

var itemClass=document.getElementsByClassName（“www组件菜单产品列表--item_DgfZL”）；
对于（i=0；i0）{
itemClass.item（i）.style.display=“无”；
}
}

下面是提示：
错误是正确的，因为
getElementsByClassName
返回一个HTML集合，因此您不能在
itemClass
上调用
getElementsByClassName
。使用此选项：
insideItemClass[i]。style.display=“无”
而不是
insideItemClass.style.display=“无”可能的重复仍然只隐藏内部元素。不是整个项目。这里有一个链接点击黄色的sativa按钮给我链接我有更新的代码，你试过了吗？仍然看不到链接。如果帮助者是小提琴手，那么所有代码都在源代码中：它正确地隐藏了test33。