Tive um pouco de dificuldade pra enteder mas conseguir pegar lendo algumas duvidas`
const lista = document.querySelector('ul')
document.querySelector('#botao-a').addEventListener("click", () => {
lista.setAttribute("data-lista", "mostrar")
})
document.querySelector("#botao-r").addEventListener("click", () => {
lista.setAttribute("data-lista", "esconder")
console.log('funcionou')
console.log(lista)
})<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="sty.css">
</head>
<body>
<button id="botao-a"">Aluratintas em estoque:</button>
<button id="botao-r" >remover lista</button>
<ul class="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>
<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="exx.js"></script>
</body>
</html> [data-lista="esconder"]{
display: none;
}
[data-lista="mostrar"] {
display: block;
}