Mensagem de erro não apaga dps de adicionar usuário

Fala Bruno,

Analisando o código acho que não está apagando pois você só está entrando na função quando tem um erro, deveria antes de chamar a função, uma outra para limpar as mensagens de erro.

var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

Não entendi. Prq o innerHTML já esta antes da chamada da função. Eu acho que tenho que chamar ele após apertar o botão de ADICIONAR também, só que não sei como, veja a função do botão adicionar:

botaoAdicionar.addEventListener("click", function(event){
    event.preventDefault();


    var form = document.querySelector("#form-adiciona");
    var paciente = obtemPacienteDoFormulario(form);

    var pacienteTr = montaTr(paciente);

    var erros = validaPaciente(paciente);

    if(erros.length > 0){
        exibeMensagensDeErro(erros);
        return; 
    }

    var tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);
    form.reset();

});

O código completo:

var botaoAdicionar = document.querySelector("#adicionar-paciente");

botaoAdicionar.addEventListener("click", function(event){
    event.preventDefault();


    var form = document.querySelector("#form-adiciona");
    var paciente = obtemPacienteDoFormulario(form);

    var pacienteTr = montaTr(paciente);

    var erros = validaPaciente(paciente);

    if(erros.length > 0){
        exibeMensagensDeErro(erros);
        return; 
    }

    var tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);
    form.reset();

});

function obtemPacienteDoFormulario(form){

    var paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: calculaImc(form.peso.value, form.altura.value)

    }
    return paciente;

}

function montaTd(dado, classe){
    var td = document.createElement("td");
    td.classList.add(classe);
    td.textContent = dado;

    return td;
}
function montaTr(paciente){
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

function validaPaciente(paciente){
    var erros = [];

    if (paciente.nome.length == 0) {
        erros.push("O nome não pode ser em branco");
    }

    if (paciente.gordura.length == 0) {
        erros.push("A gordura não pode ser em branco");
    }

    if (paciente.peso.length == 0) {
        erros.push("O peso não pode ser em branco");
    }

    if (paciente.altura.length == 0) {
        erros.push("A altura não pode ser em branco");
    }

    if (!validaPeso(paciente.peso)) {
        erros.push("Peso é inválido");
    }

    if (!validaAltura(paciente.altura)) {
        erros.push("Altura é inválida");
    }

    return erros;
}

function exibeMensagensDeErro(erros){
    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

    erros.forEach(function(erro) {
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    });


}

E aí Bruno,

Vamos entender o seu código, vou colocar comentários nas linhas

//adiciona um evento de escuta para quando o usuário clicar no botão
botaoAdicionar.addEventListener("click", function(event){
    //previne da ação padrão do botão
    event.preventDefault();

    //seleciona o formulário
    var form = document.querySelector("#form-adiciona");

    //seleciona o paciente
    var paciente = obtemPacienteDoFormulario(form);

    //seleciona TR
    var pacienteTr = montaTr(paciente);

    //recebe os erros do paciente
    var erros = validaPaciente(paciente);

    //SE tiver erro, chama a função e para de executar o código que vem depois do if
    if(erros.length > 0){
        exibeMensagensDeErro(erros);
        return; 
    }

    //só vem aqui se não gerou erro, ou seja não teve erro e não entrou na função, então se já tiver um erro na tela, o erro continuará lá, pois a função não foi chamada e o innerHTML = "" não foi acionado.

    var tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);
    form.reset();

});

Uma maneira de você saber por onde o seu código está passando é colocar um break-point no devTools do Chrome na linha em que ele limpa a UL, você verá que quando não tem erros, ele não irá passar por essa linha o/

Ou um jeito de corrigir isso também é colocando o código de limpar antes do if

    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";
    if(erros.length > 0){
        exibeMensagensDeErro(erros);
        return; 
    }

Após o form.reset(); você pode adicionar

form.reset();
var msgErro = document.querySelector("#mensagens-erro");
msgErro.innerHTML = "";

Ele fala isso no final do vídeo mas não foi colocado no final do exercício.