[Projeto] Resolução Desafio Aparece e Desaparece Lista.

Olá,

Depois de muitas tentativas consegui resolver o desafio de duas formas, segue:

1- Excluindo e inserindo os textos das tags "li .item" utilizando laço e array:

// Cria um array de backup contendo o texto de cada "li .item".
function criaListaBackup() {
    for (let c = 0; c < listaDeTintas.length; c++) {
        console.log(listaDeTintasBackup);
        listaDeTintasBackup.push(listaDeTintas[c].innerText);
    }
}

// Insere em cada "li .item" a string do array "listaDeTintasBackup.
function insereItens() {
    for (let c = 0; c < listaDeTintas.length; c++) {
        listaDeTintas[c].innerText = listaDeTintasBackup[c];
    }
}

// Remove todos os textos de cada "li .item".
function removeItens() {
    for (let c = 0; c < listaDeTintas.length; c++) {
        listaDeTintas[c].innerText = "";
    }
}

const botaoLimpaLista = document.querySelector("#botao-limpa");
const botaoInsereLista = document.querySelector("#botao-insere");

const listaDeTintas = document.querySelectorAll(".item");
const listaDeTintasBackup = [];

botaoLimpaLista.addEventListener("click", () => {
    removeItens();
})

botaoInsereLista.addEventListener("click", () => {
    insereItens();
})

// Executa a função "criaListaBackup" assim que o HTML é carregado.
window.onload = criaListaBackup;

2- Alterando a propriedade display da tag "ul" no CSS:

const listaDeTintas = document.querySelector(".lista");
const botaoLimpaLista = document.querySelector("#botao-limpa");
const botaoInsereLista = document.querySelector("#botao-insere");

function fazAparecer() {
    listaDeTintas.style.display = "block";
}

function fazDesaparecer() {
    listaDeTintas.style.display = "none";
}

botaoLimpaLista.addEventListener("click", () => {
    fazDesaparecer();
})

botaoInsereLista.addEventListener("click", () => {
    fazAparecer();
})

Valeu!