Filter HTML elements Vanilla JS

Question

Im trying to create a filter to filter different products but so far no success ive tried different ways like using a long way by using IF for every filter didnt get it to work and code was way to big, tried for loop also wasnt able to do it

im trying to use "data" attribute in HTML to mark items seems to be a best way to do it?

any help is more then welcome

heres a code bellow

const buttons = document.querySelectorAll('.btn')
const products = document.querySelectorAll('.products')


buttons.forEach(function (button) {
    button.addEventListener('click', (event) => {
        event.preventDefault()
        /* active button */
        buttons.forEach((button) => {
            button.classList.remove('active')
        })
        button.className = 'active'

        products.forEach(product => {
            showProduct = button.textContent
            
            if (product.getAttribute('data-filter') == showProduct.toLowerCase()){
                product.style.display = 'block'
            } else {
                product.style.display = 'none'
            }
        })
    })
})





    
    
    
    
    
    Document



    
        
            
                
                    All
                
                
                    Cake
                
                
                    Cookies
                
                
                    Donuts
                
                
                    Pudding
                
            
        
    

    
        
            
                
                
                    
                        
                    
                    
                      Card title
                      
                        Some simple text that describes what's going on in this very simple card.
                      
                      
                        View Source
                      
                    
                  

                
                    
                        
                    
                    
                      Card title
                      
                        Some simple text that describes what's going on in this very simple card.
                      
                      
                        View Source
                      
                    
                  
                  
                
                    
                        
                    
                    
                      Card title
                      
                        Some simple text that describes what's going on in this very simple card.
                      
                      
                        View Source
                      
                    
                  

                
                    
                        
                    
                    
                      Card title
                      
                        Some simple text that describes what's going on in this very simple card.
                      
                      
                        View Source
                      
                    
                  
                  
                
                    
                        
                    
                    
                      Card title
                      
                        Some simple text that describes what's going on in this very simple card.
                      
                      
                        View Source
                      
                    
                  

                
                    
                        
                    
                    
                      Card title
                      
                        Some simple text that describes what's going on in this very simple card.
                      
                      
                        View Source
                      
                    
                  
                  
                
                    
                        
                    
                    
                      Card title
                      
                        Some simple text that describes what's going on in this very simple card.
                      
                      
                        View Source
                      
                    
                  

                
                    
                        
                    
                    
                      Card title
                      
                        Some simple text that describes what's going on in this very simple card.
                      
                      
                        View Source

dale landry · Accepted Answer

So it seems you are looking to hide everything except what button you press.

I would first place a helper class to hide elements I want to filter out of the dom using classList to toggle the class with remove() and add()
I would move the dataset.filter attribute to the parent element .products rather than use the image as a reference and try to travel up the DOM to target the parent element.
Remove and rename your image class to products-img so it is different than the products parent element.
Use a callback to add to your eventListener that checks the targetBtn value or textContent run it through an forEach loop and if statement to handle the All button, showing all elements.
else we run a forEach over products, first hiding all elements and then matching our dataset.filter value using a conditional that checks if it is equal to e.target.textContent button.

See example below:

const buttons = document.querySelectorAll('.btn')
const products = document.querySelectorAll('.products')

function filterButtons(e) {
  let targetBtn = e.target.textContent.toLowerCase()
  targetBtn === 'all' ?
    products.forEach(p => {
      p.classList.contains('hide') ?
        p.classList.remove('hide') : null
    }) :
  products.forEach(p => {
    p.classList.add('hide')
    p.dataset.filter === targetBtn ?
      p.classList.remove('hide') : null
  })
}


buttons.forEach(function(button) {
  button.addEventListener('click', filterButtons)
})

.hide {
  display: none;
}





  
  
  
  
  
  Document



  
    
      
        
          All
        
        
          Cake
        
        
          Cookies
        
        
          Donuts
        
        
          Pudding
        
      
    
  

  
    
      
        
        
          
            
          
          
            Card title
            
              Some simple text that describes what's going on in this very simple card.
            
            
              View Source
            
          
        

        
          
            
          
          
            Card title
            
              Some simple text that describes what's going on in this very simple card.
            
            
              View Source
            
          
        
        
        
          
            
          
          
            Card title
            
              Some simple text that describes what's going on in this very simple card.
            
            
              View Source
            
          
        

        
          
            
          
          
            Card title
            
              Some simple text that describes what's going on in this very simple card.
            
            
              View Source
            
          
        
        
        
          
            
          
          
            Card title
            
              Some simple text that describes what's going on in this very simple card.
            
            
              View Source
            
          
        

        
          
            
          
          
            Card title
            
              Some simple text that describes what's going on in this very simple card.
            
            
              View Source
            
          
        
        
        
          
            
          
          
            Card title
            
              Some simple text that describes what's going on in this very simple card.
            
            
              View Source
            
          
        

        
          
            
          
          
            Card title
            
              Some simple text that describes what's going on in this very simple card.
            
            
              View Source

Filter HTML elements Vanilla JS

Answers (1)

Related Questions