如何從同名的父母中刪除同名的孩子？

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;