IF a href string contains hide parent

Question

if div class is list-view and articles a href contains string staticcards hide article & show article with a href string listcards

If div class is card-view and article a href contains string listcards hide article & show article with a href string staticcards

Below is the code, doesn't work

 if ($(".cards-wrapper").hasClass("list-view")) { $('a[href*="staticcard"]').parent().hide(); $('a[href*="listcard"]').parent().show(); } else if ($(".cards-wrapper").hasClass("card-view")) { $('a[href*="staticcard"]').parent().show(); $('a[href*="listcard"]').parent().hide(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cards-wrapper list-view"> <article> <a href="xxxxx?staticcard">Static Card</a> </article> <article> <a href="xxxxx?listcard">List Card</a> </article> </div> 

Answer 1

Modularize, clean then use it.

 var wrapper = document.getElementsByClassName("cards-wrapper")[0]; if (Array.from(wrapper.classList).indexOf("list-view") > 0) { Array.from(wrapper.getElementsByTagName("a")).filter(e=>e.href.indexOf("staticcard")>1).map(q=>q.style="display:none;"); }else { Array.from(wrapper.getElementsByTagName("a")).filter(e=>e.href.indexOf("listcard")>1).map(q=>q.style="display:none;"); } 

 <div class="cards-wrapper card-view"> <article> <a href="xxxxx?staticcard">Test 1</a> </article> <article> <a href="xxxxx?listcard">Test 2</a> </article> </div> 

 var wrapper = document.getElementsByClassName("cards-wrapper")[0]; if (Array.from(wrapper.classList).indexOf("list-view") > 0) { Array.from(wrapper.getElementsByTagName("a")).filter(e=>e.href.indexOf("staticcard")>1).map(q=>q.style="display:none;"); }else { Array.from(wrapper.getElementsByTagName("a")).filter(e=>e.href.indexOf("listcard")>1).map(q=>q.style="display:none;"); } 

 <div class="cards-wrapper list-view"> <article> <a href="xxxxx?staticcard">Test 1</a> </article> <article> <a href="xxxxx?listcard">Test 2</a> </article> </div>