Como gerar um elemento com evento após o carregamento do DOM

Fala aí Tilucast, tudo bem? Vejo duas maneiras para você fazer isso:

1. Trabalhe com JavaScript para criar os novos elementos dinamicamente, por exemplo:

const btn = document.createElement('button')
btn.textContent = 'Remover'
btn.addEventListener('click', () => {
    console.log('REMOVER...')
})

1. Em vez de trabalhar com addEventListener adicione um atributo de click no botão:

<button onclick="remover()">Remover</button>

Dessa maneira, basta você ter a função remover que ele irá chamá-la.

Entre as duas, eu recomendaria a primeira opção.

Espero ter ajudado.

Apenas compartilhando a solução que eu achei pra esse problema, caso alguém tenha pensado em fazer o mesmo que eu:

function createPacienteHtml(paciente){

let criarLista = document.createElement("tr");
criarLista.classList.add("paciente");

criarLista.appendChild(createInfoPaciente(paciente.nome,"info-nome"));
criarLista.appendChild(createInfoPaciente(paciente.peso,"info-peso"));
criarLista.appendChild(createInfoPaciente(paciente.altura,"info-altura"));
criarLista.appendChild(createInfoPaciente(paciente.gordura,"info-gordura"));
criarLista.appendChild(createInfoPaciente(paciente.imc,"info-imc"));
let iconeRemove = criarLista.appendChild(createInfoPaciente("x", "icone-remover"));
iconeRemove.onclick = removerPaciente;

return criarLista;

}

Adicionei por essa função o ícone, que na verdade é só um x, a cada paciente criado, e coloquei a função onclick diretamente no elemento, e eis aqui a função:

function removerPaciente (event){ event.target.parentNode.classList.add("remove-paciente"); setTimeout(()=>{ event.target.parentNode.remove(); }, 500); }

Basicamente, uma pequena alteração no código original, pra deixar mais "normal" a remoção de pacientes da tabela. Vlw

Boa Tilucast, fico feliz que tenha resolvido o problema.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.