Как я могу спрятать карты?

Question

Я создаю функцию поиска.Эта функция просматривает совпавшие буквы в имени карты и удаляет карту, которая не соответствует буквам в поле поиска.Я могу удалить элемент h4, но не могу удалить карту.Я пытался использовать ID и отображение стиля записи на ID, но по какой-то причине это не сработало.Кто-нибудь может мне помочь?

https://jsfiddle.net/2xf8ktoq/

Я пытался добавить новый идентификатор и показать / скрыть, но получаю ошибку.

const cardBox = document.querySelectorAll("#cardSort");
searchField.addEventListener("keyup", function(e){
    const term = e.target.value.toLowerCase();
    const cardsName = document.getElementsByTagName("h4");
    Array.from(cardsName).forEach(function(card){
      const title = card.textContent;
        if(title.toLowerCase().indexOf(term) != -1){
            card.style.display = "block";
        } else {
            card.style.display = "none";
        }
    })
})

Answer 1

Я видел, что вы искали h4 и просто переключали свойство блока на h4. Это была причина, по которой он просто скрывал заголовок заголовка, но не полную карточку. Чтобы скрыть карту, вам нужно установить свойство block: none для карты, а не просто заголовок.

Кроме того, я вижу, что вы устанавливали id='cardSort' для всех карт. Поскольку id является уникальным атрибутом в dom, лучше установить вместо него name="cardSort". Если название / название вашей карты уникально, вы можете установить ее как идентификатор для каждой карты. И затем вы можете найти все элементы по имени 'cardSort' с помощью document.getElementsByName('cardSort') и проверить, соответствует ли ключ поиска в id, и соответственно переключить отображение карточек.

Пожалуйста, проверьте ваш код обновлен здесь https://jsfiddle.net/tintin64/vk7ou5me/

Надеюсь, это поможет