Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] replaceChildren() para remover os itens da lista

Olá.

Na aula, a Moni utilizou o seguinte código para remover os elementos de uma ul:

while (lista.firstChild) {
    lista.removeChild(lista.firstChild);
}

Pesquisando na MDN, vi que existe a função replaceChildren() que aparentemente faz a mesma coisa:

lista.replaceChildren();

Por favor, gostaria de saber se posso usar a replaceChildren() ou se ela possui alguma desvantagem/perigo ao ser usada para esse fim.

Obrigado, Matheus

1 resposta
solução!

Oi Matheus, tudo bem?

Desculpe a demora em te responder!

Há várias maneiras de escrever o código de uma mesma função e a opção que você apresentou pode ser uma delas para realizar a busca dos vídeos.

A instrutora Mônica realiza a função de busca por meio de um laço de repetição (while) e coloca como condição lista.firstChild para verificar se há um primeiro elemento dentro da lista que foi informada, se essa condição for verdadeira então será executada a função dentro das chaves (lista.removeChildren(lista.firstChild)) que faz com que seja removido dessa lista o primeiro elemento e isso vai se repetir até que não tenha mais nenhum elemento na lista.

O método que você sugeriu, utiliza o replaceChildren(), que realiza a substituição dos elementos da lista atual por um novo conjunto especificado através da palavra-chave que será pesquisada. Nesta opção não precisamos criar o laço de repetição e podemos apenas inserir como você bem colocou a linha de código:

lista.replaceChildren()

Portanto, as duas opções executam operações diferentes que levam a um mesmo resultado e você pode decidir qual das duas utilizar em seu projeto. Contudo, é importante reforçar como cada um dos comandos atua: no laço de repetição apagamos todos os dados da lista para reescrevê-los depois e ao utilizar o replaceChildren() substituímos os valores e reescrevemos a lista baseados no valor pesquisado.

O código completo com as alterações poderia ser escrito da seguinte maneira:

async function buscarVideo(evento){
    evento.preventDefault();

    const dadosDePesquisa = document.querySelector("[data-pesquisa]").value;
    const busca = await conectaApi.buscaVideo(dadosDePesquisa);

    const lista =  document.querySelector("[data-lista]");

    lista.replaceChildren();

    busca.forEach(elemento => lista.appendChild(
        constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))  

    if (busca.length == 0) {
        lista.innerHTML = `<h2 class="mensagem__titulo">Não há vídeos com essa palavra</h2>`
    }
}

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição!

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!