Живой фильтр по набранной букве, почему этот код не работает?

let search = document.getElementById('search')
let allElements = document.querySelectorAll('.ClientsCard')

// 2. устанавливаем обработчик на поле ввода
search.addEventListener('input', function() {
  parseElements(this.value)
})

// 3. функция поиска по элементам
const parseElements = function(text) {
  return allElements.forEach(function(element) {
    if ((element.innerText.toLowerCase() + "").indexOf(text.toLowerCase()) != -1) {

      element.classList.remove('hide')
    } else {
      element.classList.add('hide')
    }
    return element
  });
}
.hide {
  display: none;
}
.tres2 {
   border: solid 1px #148051;
}
.tres {
    border: solid 1px #f4faff;
    background: #148051;
    color: white;
}
.tre {
    line-height: 3rem;
}
.ClientsGrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}
@media (max-width: 999px) {
.ClientsGrid {
    grid-template-columns: repeat(4, 1fr);
}
}
.ClientsCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    text-align: center;
    box-shadow: var(--mainBoxShadow);
    border: solid 1px lightgrey;
    margin-bottom: 10px;
}
.ClientsCard__img {
    margin-bottom: 30px;
    width: 128px;
    height: 64px;
}
.ClientsCard__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ClientsCard__a {
    text-decoration: none;
    color: var(--blue);
    transition: all 0.25s;
}
.ClientsCard__p {
    margin-top: 15px;
}
  Маска для поиска:
<input type="text"  id='search' />

<div class="row">
        <div class="ClientsGrid">
        
        <div class="ClientsCard">AT
                        <a style="text-decoration:none;" target="_blank" href="/partners/at/">
                            <div class="ClientsCard__img">
                                 
                                <img alt="AT" title="AT" src="/media/CACHE/images/images_partners/_autotechgroup/8cbf94820a9b1a58b87698312a096f33.jpg">
                                 
                            </div>
</a>                        <a target="_blank" rel="nofollow" class="ourClientsCard__a" href="https://autotechgroup.ru/">https://autotechgroup.ru/</a>
                        <p class="ClientsCard__p">
                            AT </p>

                    </div>
                    
        <div class="ClientsCard">Starline
                        <a style="text-decoration:none;" target="_blank" href="/partners/starline/">
                            <div class="ClientsCard__img">
                                 
                                
                            </div>
</a>                        <a target="_blank" rel="nofollow" class="ourClientsCard__a" href=""></a>
                        <p class="ClientsCard__p">
                            Starline </p>

                    </div>
                    
        </div>
    </div>


Ответы (1 шт):

Автор решения: Grundy

Если посмотреть какие стили применяются к элементу
введите сюда описание изображения

Можно заметить, что стиль от hide перекрывается стилем от ClientsCard

Это происходит из-за того, что класс hide описан ДО класса ClientsCard.

Для решения достаточно перенести его описание после, либо добавить !important

let search = document.getElementById('search')
let allElements = document.querySelectorAll('.ClientsCard')

// 2. устанавливаем обработчик на поле ввода
search.addEventListener('input', function() {
  parseElements(this.value)
})

// 3. функция поиска по элементам
const parseElements = function(text) {
  return allElements.forEach(function(element) {
    if ((element.innerText.toLowerCase() + "").indexOf(text.toLowerCase()) != -1) {

      element.classList.remove('hide')
    } else {
      element.classList.add('hide')
    }
    return element
  });
}
.tres2 {
   border: solid 1px #148051;
}
.tres {
    border: solid 1px #f4faff;
    background: #148051;
    color: white;
}
.tre {
    line-height: 3rem;
}
.ClientsGrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}
@media (max-width: 999px) {
.ClientsGrid {
    grid-template-columns: repeat(4, 1fr);
}
}
.ClientsCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    text-align: center;
    box-shadow: var(--mainBoxShadow);
    border: solid 1px lightgrey;
    margin-bottom: 10px;
}
.ClientsCard__img {
    margin-bottom: 30px;
    width: 128px;
    height: 64px;
}
.ClientsCard__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ClientsCard__a {
    text-decoration: none;
    color: var(--blue);
    transition: all 0.25s;
}
.ClientsCard__p {
    margin-top: 15px;
}

.hide {
  display: none;
}
Маска для поиска:
<input type="text"  id='search' />

<div class="row">
        <div class="ClientsGrid">
        
        <div class="ClientsCard">AT
                        <a style="text-decoration:none;" target="_blank" href="/partners/at/">
                            <div class="ClientsCard__img">
                                 
                                <img alt="AT" title="AT" src="/media/CACHE/images/images_partners/_autotechgroup/8cbf94820a9b1a58b87698312a096f33.jpg">
                                 
                            </div>
</a>                        <a target="_blank" rel="nofollow" class="ourClientsCard__a" href="https://autotechgroup.ru/">https://autotechgroup.ru/</a>
                        <p class="ClientsCard__p">
                            AT </p>

                    </div>
                    
        <div class="ClientsCard">Starline
                        <a style="text-decoration:none;" target="_blank" href="/partners/starline/">
                            <div class="ClientsCard__img">
                                 
                                
                            </div>
</a>                        <a target="_blank" rel="nofollow" class="ourClientsCard__a" href=""></a>
                        <p class="ClientsCard__p">
                            Starline </p>

                    </div>
                    
        </div>
    </div>

→ Ссылка