select elements by class that have a specific child element with javascript

Question

I have a product list that is structured like the below HTML.

I am trying to select the elements with the class="www-components-menu-product-list--item_DgfZL" that contain the elements with the class name class="www-components-product-card--cbd_2luC9".

Then I want to hide those elements in a click function.

Please note. I have a lot of these items on the page, the function should apply to all the potential elements not just the two I have in the example.

I already understand how to do this with Jquery, but I am trying to avoid Jquery here.

This my attempt with 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";

        }

}

HTML Structure:

<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>

MY ERROR

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

The error is correct because `getElementsByClassName` returns an HTML collection so you can't call `getElementsByClassName` on `itemClass`. — Script47, Sep 07 '17 at 08:33
use this: `insideItemClass[i].style.display = "none";` instead of `insideItemClass.style.display = "none";` — Rakib, Sep 07 '17 at 08:33
Possible duplicate of [How to get child element by class name?](https://stackoverflow.com/questions/12166753/how-to-get-child-element-by-class-name) — Script47, Sep 07 '17 at 08:34

Rakib · Accepted Answer · 2017-09-07T09:14:33.900

1

use this:

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

instead of

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

Full code:

    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";
      }
}

Here is the fiddle: https://jsfiddle.net/jeL0fezh/8/

edited Sep 07 '17 at 09:14

answered Sep 07 '17 at 08:36

Rakib

643
7
17

this still only hides the inside element. not the entire item. here is a link click yellow sativa button [link](https://www.treaze.com/menubest.html) – Aaron Sep 07 '17 at 08:42
Give me the link – Rakib Sep 07 '17 at 08:44
I have updated code, did you try that? Still can't see the link. – Rakib Sep 07 '17 at 08:47
[Click the Yellow sativa button please](https://www.treaze.com/menubest.html) also all the code is in the source if that helps – Aaron Sep 07 '17 at 08:49
Here is the fiddle: https://jsfiddle.net/jeL0fezh/2/ it's hiding the test33 properly. – Rakib Sep 07 '17 at 08:49
@Aaron i have checked and above code is working. Can you please test? – Rakib Sep 07 '17 at 08:52
im trying to hide the outer element but select that outer element based on it containing the inner element with the class www-components-product-card--hybrid_2AD7v – Aaron Sep 07 '17 at 08:58
Outer elements means which one? Pease mention the class name. – Rakib Sep 07 '17 at 08:59
i want to hide elements with this class name "www-components-menu-product-list--item_DgfZL", when these elements contain elements with the class"www-components-product-card--hybrid_2AD7v" – Aaron Sep 07 '17 at 09:02
You have 3 classes: 1. www-components-menu-product-list--item_DgfZL 2.www-components-product-card--card_2mjWk and 3. www-components-product-card--hybrid_2AD7v so which one you want to hide? – Rakib Sep 07 '17 at 09:02
Hi, i have updated the code and the fiddle: https://jsfiddle.net/jeL0fezh/8/. Now it will hide www-components-menu-product-list--item_DgfZL when these elements contain elements with the class"www-components-product-card--hybrid_2AD7v". – Rakib Sep 07 '17 at 09:10
Please let me know if it works and don't forget to cast up vote and mark it as accepted answer. – Rakib Sep 07 '17 at 09:16
it messes up my css a little bit, but i can figure that out. However this is what i'm looking for. Thank for your time and effort. – Aaron Sep 07 '17 at 09:18

select elements by class that have a specific child element with javascript

1 Answers1