I am looking to create this in vanilla JS, granted jQuery was used. I wanted to use lean JS. The code below just gave quick results fast. However for build, I would like it leaner.
Several annoying factors, multiple child descendants, unknown classes all and have to be inside a loop.
$('.nav__adv').each(function(){ var $el = $(this), $no_advert = $('.main_ad_container div a div div', $el); $el.filter(function() { return $.trim($no_advert.text()) === "Advertise Here"; }).css("display", "none").remove(); });
Any direction / help / guidance?
Advertisement
Answer
Using plain Javascript. Note that the advantage to using jQuery is that it will work cross browser.
[].forEach.call(document.querySelectorAll(".nav__adv"), function(el) { var no_advert = el.querySelector(".main_ad_container div a div div"); if(no_advert && no_advert.textContent.trim() === "Advertise Here") { el.parentElement.removeChild(el); } });
<div class="nav__adv"> <div class="main_ad_container"> <div> <a> <div> <div>Advertise Here</div> </div> </a> </div> </div> </div> <div class="nav__adv"> <div class="main_ad_container"> <div> <a> <div> <div>Leave Untouched</div> </div> </a> </div> </div> </div>
If you want cross-browser support in vanilla JS, this gets slightly more complicated.