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

No HTML editei para que as tintas tivessem o mesmo atributo (tipo="item") e adicionei dois botões, de remover e adicionar cor.

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

  <h2 class="titulo"> Aluratintas em estoque:</h2>

  <ul class="lista">
    <li cor="laranja" tipo="tinta" class="item">Tinta laranja</li>
    <li cor="vermelho" tipo="tinta" class="item">Tinta vermelha</li>
    <li cor="branco" tipo="tinta" class="item">Tinta branca</li>
    <li cor="amarelo" tipo="tinta" class="item">Tinta amarela</li>
    <li cor="rosa" tipo="tinta" class="item">Tinta rosa</li>
    <li cor="preto" tipo="tinta" class="item">Tinta preta</li>
  </ul>
  <button botaoRemover="removerCor"> Remover cores</button>
  <button botaoAdicionar="AdicionarCor"> Adicionar cores</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="main.js"></script>
</body>
</html>

No CSS adicionei um atributo com display none.

[remover=removido]{

    display: none;
  }

E no JS utilizei o querySelectorAll para armazenar as cores em uma const, e querySelector para armazenas os botões. Toda vez que o botão de remover for clicado será chamada a função removeCor que vai adicionar o atributo remover nos elementos dentro do array tinta, esse atributo está configurado como display none no CSS, então o itens serão removidos. Para adicionar novamente basta clicar no botão de adicionar e toda vez que o botão for clicado a função de adicionar vai ser acionada e vai remover o atributo "remover".

    const tinta = document.querySelectorAll("[tipo]");
    const botaoRemover = document.querySelector("[botaoRemover]");
    const botaoAdicionar = document.querySelector("[botaoAdicionar]");

    botaoRemover.addEventListener("click", removeCor);
    botaoAdicionar.addEventListener("click", adicionarCor);


    function removeCor() {

        tinta.forEach( (elemento) =>{

            elemento.setAttribute("remover","removido");

            })
    }

    function adicionarCor() {

        tinta.forEach( (elemento) =>{

            elemento.removeAttribute("remover");

            })
    }