Apenas compartilhando a solução que achei para o desafio proposto.
1- Comecei por adicionar o botão "Esconder" e alterar os atributos do já existente:
<button data-botao="mostrar">Aluratintas em estoque:</button>
<button data-botao="esconder">Esconder</button>
2- Implementei uma estilização simples para uma classe especifica no arquivo CSS:
.esconder{
display: none;
}
3- Depois implementei o seguinte código JS:
const lista = document.querySelector('.lista');
var botoes = document.querySelectorAll('[data-botao]')
botoes.forEach((botao) => {
botao.addEventListener('click', (evento) => {
mostraEscondeTinda(evento.target.dataset.botao)
})
})
function mostraEscondeTinda(operacao) {
if(operacao === 'mostrar') lista.classList.remove('esconder');
else if(operacao === 'esconder') lista.classList.add('esconder');
else alert(`A operação escolhida (${operacao}) é inválida!`);
}