Как сделать фильтр по городам?

Вот что у меня в конце концов получилось. Но загвоздка в том что когда я пишу что то и удаляю всё из поля (то есть делаю его пустым) то всё равно всем элементам добавляется класс active, такая же история и с пробелом в пустом поле.
JS

const cities = document.querySelectorAll("h2");
const filter = document.querySelector("input");

filter.addEventListener("input", () => {
  if (document.querySelector(".active")) {
    document.querySelectorAll(".active").forEach((el) => {
        el.classList.remove("active");
    });
  }
  cities.forEach((el) => {
    console.log();
    if (
      el.textContent
        .toLowerCase()
        .split("")
        .join(" ")
        .includes(filter.value.toLowerCase().split("").join(" "))
    ) {
      el.classList.add("active");
    }
  });
});

Как сделать фильтр по городам?

Сергей delphinpro, Ну смотрите в выше перечисленном HTML есть город Алтай я ввожу в поле "Ал" и класс не добавляется всем элементам у которых есть буквосочетание "Ал". Вот как сделать эту проверку я не знаю. Я пробовал методом includes но это не помогло.

Как получить элементы, у которых отсутствует определённый класс?

Спасибо вам добрый человек!

Как получить элементы, у которых отсутствует определённый класс?

А так сразу с querySelector-ом не получиться да?

Как получить элементы, у которых отсутствует определённый класс?

Ankhena, Это в JS или в CSS?

Как сделать плавное увеличение высоты текста?

Спасибо. Решил задачу с помощью обертки текста в блок, и у обёртки стал менять высоту в зависимости от высоты текста

В CSS изменил:

/* ----CONTENT */
.faqs-block-question__content {
  line-height: 26px;
  margin: 15px 0;
  transform-origin: center top;
  max-height: 0;
  overflow: hidden;
/* ЗАМЕНИЛ height:0 на max-height:0 */
}
.faqs-block-quetions__item.--active .faqs-block-question__content {
/* УБРАЛ heigt: 100% */
}

Вот скрипт который получился JS

const textBtns = document.querySelectorAll(".faqs-block-question__title");

textBtns.forEach((el) => {
  el.addEventListener("click", (elem) => {
    el.parentNode.classList.toggle("--active");

    if (
      elem.target
        .closest(".faqs-block-quetions__item")
        .classList.contains("--active")
    ) {
      elem.target
        .closest(".faqs-block-quetions__item")
        .querySelector(".faqs-block-question__content").style.maxHeight = `${
        elem.target
          .closest(".faqs-block-quetions__item")
          .querySelector(".faqs-block-question__content>h2").offsetHeight
      }px`;
    } else if (
      !elem.target
        .closest(".faqs-block-quetions__item")
        .classList.contains("--active")
    ) {
      elem.target
        .closest(".faqs-block-quetions__item")
        .querySelector(".faqs-block-question__content").style.maxHeight = `0px`;
    }
  });
});

Почему background-image не растягиватеся на всю высоту контейнера и как это исправить?

А как это работает? (top/contain) (center/cover) (top/cover) и т.д. Не совсем понимаю

Почему текст не растягивается на всю длину?

Вау. Спасибо вам за быструю помощь!

Можно ли использовать transition для всех элементов сайта по умолчанию?

Это как-нибудь повлияет на производительность и скорость сайта?

Как убрать пространство между двумя объектами?

Кирилл Никитин, А как можно придать тексту форму кнопок?

Как переписать класс DOM элемента?

zeretkk, Спасибо за помощь. Если вы не понимаете моего вопроса, то и дальнейших моих объяснений не поймёте. Я все таки думаю что решение в Gulp но не уверен.

Как переписать класс DOM элемента?

zeretkk, Про это пока не знаю, надо будет изучить.

Как переписать класс DOM элемента?

Наверное только вручную можно переписывать в файле класс для каждого элемента.

Как переписать класс DOM элемента?

Да точку забыл. Но извините это не то что мне нужно. Мне нужно чтобы этот класс переписался в самом файле. И если я удалю скрипт то этот класс сохранился.

Как из коллекции, получить Input в котором произошло изменение?

А есть возможность повесить обработчик событий на каждый элемент перебрав коллекцию? А то если у меня будет допустим 40 инпутов то это как минимум не удобно.

Почему Scanner не работает?

Zerg89, Я думал что из за этой ошибки дальнейший код, не будет работать спасибо за ответ!

Почему не работает позиционирование?

Danny Arty, Про margin я вообще не подумал, и это тоже можно считать решением

Почему не работает позиционирование?

Danny Arty, Ну уже сделал. Если интересно то верхнюю и нижнюю полоску прижать к левой стенке, а полоску по центру прижать к правой стенке при hover

Почему не работает позиционирование?

Ну если так сделать, то я не смогу сделать анимацию c помощью hover, так как transition не работает на align-items вот и ищу альтернативу

Почему не работает позиционирование?

А не получится с помощью left 0 или right 0 прижать к стенке?