how select all element with the same class that aren't child of same class?

November 27, 2022

how to select only the parent element with a class?

❌ not all elements with a class like it do document.querySelectorAll(".mycard")
✅ but only the first parent element with the class,

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel
- and this element that we take don’t need to have a parent with .mycard

it needs to return an array with all the divs that meet these conditions, and should work with every deep tree (10 of deep is a good point it is difficult to do)

so it should not consider a div if not have the class, and go deep until finds the class we want, breaks, tries to search to others and repeat the process, and return us an array.
if we find the wanted class, we add it to the array to return BUT
- we need to check if the nested divs continue or not
  - if continue and we don’t any other nested thing is fine don’t return anything new
  - if it stops we need to search if there is another div with class, if add it to the array and repeat process until we finish the tree deep.

here is an example where you try your code:

    <div class="mycard"> <!-- should get the parent only -->
      <div class="mycard">
        <div class="mycard">
          <div class="mycard"></div>
        </div>
      </div>
    </div>

    <div class="mycard"> <!-- should get also this with a array of the fist and second -->
      <div class="mycard">
        <div class="mycard">
          <div class="mycard"></div>
        </div>
      </div>
    </div>

    <div class="another-div">
      <div class="mycard"> 
        <!-- should get also this that isn't in body directly -->
      </div>
    </div>

    <div class="another-div">
      <div class="foo">
        <div class="bar">
          <div class="mycard"> 
            <!-- should get also this that isn't in body directly -->
          </div>
        </div>
      </div>
    </div>

    <div class="another-div">
      <div class="foo">
        <div class="bar">
          <div class="mycard"> <!-- this -->
            <div class="boo">
              <div class="mycard"> <!-- also this -->
              </div> 
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mycard"> <!-- this -->
      <div class="boo">
        <div class="mycard"> <!-- also this -->
          <div class="mycard"> 
            <div class="mycard"></div> 
          </div>
        </div> 
      </div>
    </div>

    <!-- returns [mycard, mycard, mycard, mycard, ...] 8 in total here, loopable in forEach -->

returns [mycard, mycard, mycard, mycard, …] 8 in total here, loopable in forEach

>Solution :

You can use document.getElementsByClassName and convert the result to an array. From there, you can use .filter(). Like this:

let els = [...document.getElementsByClassName('mycard')];
els = els.filter(el => !el.parentNode.classList.contains('mycard'));

console.log(els);

<div class="mycard">
  <!-- should get the parent only -->
  <div class="mycard">
    <div class="mycard">
      <div class="mycard"></div>
    </div>
  </div>
</div>

<div class="mycard">
  <!-- should get also this with a array of the fist and second -->
  <div class="mycard">
    <div class="mycard">
      <div class="mycard"></div>
    </div>
  </div>
</div>

<div class="another-div">
  <div class="mycard">
    <!-- should get also this that isn't in body directly -->
  </div>
</div>

<div class="another-div">
  <div class="foo">
    <div class="bar">
      <div class="mycard">
        <!-- should get also this that isn't in body directly -->
      </div>
    </div>
  </div>
</div>

<!-- returns [mycard, mycard, mycard, mycard] loopable in forEach -->