How to remove children with the same name from parents with the same name?

I have 4 cards(.program-card) and in each one a link(.more-link). I am trying to remove the buttons when the window width > 1024. I know how to remove multiple children with the same name from one parent element but how can this be done with multiple parents that have the same name? Javascript only ideas.

So, removing the children from the DOM is the end goal.

if (window.innerWidth > 1024) {
  const moreLinks = document.querySelectorAll('.more-link'),
    programCards = document.querySelectorAll('.program-card');

  for (let index = 0; index < moreLinks.length; index++) {
    const link = moreLinks[index];

    programCards.forEach(card, () => {
      card.removeChild(link);
    });
  }
}

<div class="section-frame grid-container">
  <div class="program-card">
    <h4>Title 1</h4>
    <img class="card-image" src="./img/asset 4.jpeg" alt="Djeca treniraju">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique quas ducimus quam soluta sequi suscipit aperiam a.</p>

    <a class="more-link" href="#" title="Saznaj više o programu ''Mali olimpijac''">Saznaj više</a>
  </div>

  <div class="program-card">
    <h4>Title 2</h4>
    <img class="card-image" src="./img/asset 5.jpeg" alt="Djeca treniraju">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique quas ducimus quam soluta sequi suscipit aperiam a.</p>

    <a class="more-link" href="#" title="Saznaj više o programu ''Mali olimpijac''">Saznaj više</a>
  </div>

  <div class="program-card">
    <h4>Title 3</h4>
    <img class="card-image" src="./img/asset 6.jpeg" alt="Djeca treniraju">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique quas ducimus quam soluta sequi suscipit aperiam a.</p>

    <a class="more-link" href="#" title="Saznaj više o programu ''Mali olimpijac''">Saznaj više</a>
  </div>

  <div class="program-card">
    <h4>Title 4</h4>
    <img class="card-image" src="./img/asset 7.jpeg" alt="Djeca treniraju">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique quas ducimus quam soluta sequi suscipit aperiam a.</p>

    <a class="more-link" href="#" title="Saznaj više o programu ''Mali olimpijac''">Saznaj više</a>
  </div>
</div>

Answer

But you can do it with media query(css) as well.

.more-link {
        display: block;
    }
    
@media only screen and (min-width : 1024px) {
    .more-link {
        display: none;
    }
}

However if you would like with js, here is solution:

function resizedWindow(){
  const moreLinks = document.querySelectorAll('.more-link');
  for (let index = 0; index < moreLinks.length; index++) {
    const link = moreLinks[index];
    if (window.innerWidth > 1024) {
      //or remove -> link.remove();
      link.style.display = 'none'
    } else {
      link.style.display = 'block'
    }
  }
}
window.onresize = resizedWindow;

Advertisement

Answer