Como excluir os nomes da lista mantendo eles na mesma linha? | Lógica de programação: praticando com desafios

Como excluir os nomes da lista mantendo eles na mesma linha separados por vírgula? A solução apresentada ignora os ifs dentro da função adicionar e cria parágrafos para cada nome no método atualizarLista. E como deixar a "mãozinha" com o "dedo" apontando para o nome que queremos excluir?

let amigos = [];


function adicionar() {
    let amigo = document.getElementById('nome-amigo');
    let lista = document.getElementById('lista-amigos');


    amigos.push(amigo.value);


    if (lista.textContent == '') {
        lista.textContent = amigo.value;
    } else {
        lista.textContent = lista.textContent + ', ' + amigo.value;
    }


    amigo.value = '';


    atualizarLista();
    atualizarSorteio();
}


function sortear() {
    embaralhar(amigos);


    let sorteio = document.getElementById('lista-sorteio');
    for (let i = 0; i < amigos.length; i++) {
        if (i == amigos.length - 1) {
            sorteio.innerHTML = sorteio.innerHTML + amigos[i] +' --> ' +amigos[0] + '<br/>';
        } else {
            sorteio.innerHTML = sorteio.innerHTML + amigos[i] +' --> ' +amigos[i + 1] + '<br/>';
        }
    }
}


function excluirAmigo(index) {
    amigos.splice(index, 1);
    atualizarLista();
    atualizarSorteio();
}


function embaralhar(lista) {
    for (let indice = lista.length; indice; indice--) {
        const indiceAleatorio = Math.floor(Math.random() * indice);
        [lista[indice - 1], lista[indiceAleatorio]] = [lista[indiceAleatorio], lista[indice - 1]];
    }
}


function atualizarSorteio() {
    let sorteio = document.getElementById('lista-sorteio');
    sorteio.innerHTML = '';
}


function atualizarLista() {
    let lista = document.getElementById('lista-amigos');
    lista.innerHTML = '';


    for (let i = 0; i < amigos.length; i++) {
        // Cria um elemento de parágrafo para cada amigo
        let paragrafo = document.createElement('p');
        paragrafo.textContent = amigos[i];
       
        // Adiciona um evento de clique para excluir o amigo
        paragrafo.addEventListener('click', function() {
            excluirAmigo(i);
        });


        // Adiciona o parágrafo à lista
        lista.appendChild(paragrafo);
    }
}


function reiniciar() {
    amigos = [];
    document.getElementById('lista-amigos').innerHTML = '';
    document.getElementById('lista-sorteio').innerHTML = '';
}

Olá, Luidi!

Para resolver o problema de exibir os nomes na mesma linha e separados por vírgula, você pode ajustar a função atualizarLista para concatenar os nomes em uma única string, em vez de criar um parágrafo para cada nome. Aqui está uma sugestão de como você pode modificar essa função:

function atualizarLista() {
    let lista = document.getElementById('lista-amigos');
    lista.innerHTML = '';

    let nomes = amigos.map((amigo, index) => {
        // Cria um span para cada amigo e adiciona um evento de clique para excluir o amigo
        let span = document.createElement('span');
        span.textContent = amigo;
        span.style.cursor = 'pointer'; // Adiciona o cursor de mãozinha
        span.addEventListener('click', function() {
            excluirAmigo(index);
        });

        return span.outerHTML; // Retorna o HTML do span
    });

    lista.innerHTML = nomes.join(', '); // Junta todos os spans em uma única string separada por vírgula
}

Com essa alteração, cada nome será exibido na mesma linha, separado por vírgula, e o cursor mudará para uma "mãozinha" quando você passar o mouse sobre o nome, indicando que ele pode ser clicado para ser excluído.

Espero ter ajudado e bons estudos!

Mergulhe em programação