Включение этой ванили JS

Question

Я ищу для создания этого в vanilla JS, предоставленный jQuery. Я хотел использовать постное JS. Приведенный ниже код быстро дал быстрые результаты. Однако для сборки я бы хотел, чтобы он был более компактным.

Несколько раздражающих факторов, несколько дочерних потомков, неизвестные классы все и должны находиться внутри цикла.

$('.nav__adv').each(function(){ 
 

 
\t var $el = $(this), 
 
\t \t $no_advert = $('.main_ad_container div a div div', $el); 
 

 
\t $el.filter(function() { 
 
\t  return $.trim($no_advert.text()) === "Advertise Here"; 
 
\t }).css("display", "none").remove(); 
 

 
});

Любое направление/помощь/руководство?

Answer 1

Использование простого Javascript. Обратите внимание, что преимущество использования jQuery заключается в том, что он будет работать с перекрестным браузером.

[].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>

Если вам нужна поддержка кросс-браузер в ванильным JS, это становится немного сложнее.

Answer 2

Рассмотрите возможность написания того же кода в js примерно так. Хотя вам не нужно писать его, поскольку jQuery упрощает его с помощью лучшего и короткого синтаксиса.

var no_advert = document.querySelectorAll('.nav__adv .main_ad_container div a div div'); 
 

 
var el2hide = Array.prototype.filter.call(no_advert, function(elem) { 
 
    return elem.textContent.trim() === "Advertise Here"; 
 
}); 
 

 
Array.prototype.map.call(el2hide, function(_this){ _this.remove(); });

<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>