如何从同名的父母中删除同名的孩子？

Question

我有 4 张卡片（.program-card），每张卡片都有一个链接（.more-link）。 我试图在 window 宽度 > 1024 时删除按钮。我知道如何从一个父元素中删除多个具有相同名称的子元素，但是如何使用具有相同名称的多个父元素来完成？ Javascript 只有想法。

因此，从 DOM 中移除子节点是最终目标。

 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 1

但是您也可以使用媒体查询（css）来做到这一点。

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

但是，如果您想使用 js，这里是解决方案：

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;