Remove a if contains a certain string Javascript not jquery

Question

I have at least 4 buttons at 1 time

<a class="test" id="4" href="#">Browse</a>
<a class="test" id="5" href="#">Browse Catalogue</a>
<a class="test" id="6" href="#">Browse Albums</a>
<a class="test" id="7" href="#">Browse people</a>

I would like to remove or hide the one that only says "Browse". All others should still stay visible. Basically the non jquery of below. It needs to be pure JS.

 $('.test').filter(function () {
    return $(this).text() == 'Browse';
}).hide();

Thanks for any help.

Answer 1

Here is my take, if you'd like to keep the functional style of your code.

var tests = document.getElementsByClassName('test');

Array.prototype.filter.call(tests,function (elem) {
    return (elem.textContent || elem.innerText) === 'Browse';
}).forEach(function (elem) {
    elem.style.display = "none";
});

Working code

Answer 2

Easier backwards.

var els = document.getElementsByClassName('test');
for (var el, i = 0; i < els.length; ++i) {
  el = els[i];
  if (el.innerHTML == 'Browse') {
    el.style.display = 'none';
  }
}

Answer 3

$('.test').each(function () {
   if($(this).html()=='Browse'){
    $(this).attr("style", "display:none");
}
})