Minha solução! | JavaScript: manipulando o DOM | Alura

criei um segundo botão para ocultar a lista

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Manipulando o DOM - Aula 3</title>
  <link rel="stylesheet" href="/exercicio/style2.css">
</head>
<body>

  <button onclick="mostraTintas(this)">Mostrar Aluratintas em estoque:</button>

  <ul class="lista" data-lista>
    <li cor="laranja" tipo="tinta-exterior" class="item">Tinta laranja</li>
    <li cor="vermelho" tipo="tinta-interior" class="item">Tinta vermelha</li>
    <li cor="branco" tipo="tinta-interior" class="item">Tinta branca</li>
    <li cor="amarelo" tipo="tinta-exterior" class="item">Tinta amarela</li>
    <li cor="rosa" tipo="tinta-exterior" class="item">Tinta rosa</li>
    <li cor="preto" tipo="tinta-exterior" class="item">Tinta preta</li>
  </ul>

  <button class="cancel" onclick="ocultaTintas(this)">Esconder tintas disoníveis</button>

  <a href="https://alura.com.br/" target="_blank"><img src="https://www.alura.com.br/assets/img/home/alura-logo.svg" alt="" class="alura-logo"></a>

  <script src="/exercicio/script2.js"></script>

</body>
</html>

adicionei um hover de cor vermelha para identificar e alertar de que é um botão de ocultar

.cancel:hover{
    color: white;
    background-color: rgb(255, 0, 0);
}



function ocultaTintas(){
    const tintas = document.querySelector(".lista")

    tintas.style.display = "none"
}

function mostraTintas(){
    const tintas = document.querySelector(".lista")

    tintas.style.display = "block"
}