Script deleting other html elements

Question

I am trying to put a required field message, at the moment I can only put in an input, the idea is to put in everyone and when it suffers the action of a click on the message, the tag that is created dynamically will be deleted.

With the script below, when clicking inside an input and then clicking outside the input box without having filled anything, the required field message will appear and when clicking on that message, it will be deleted.

However, if I click on any field still with the active message, all the elements that are clicked will be deleted.

$('#nome').blur(function(event){
  event.preventDefault();

  //esse if evita ficar aparecendo varias mensagens
  if($('.triangulo').length){
    return;
}
// esse if adiciona a tag p com o conteúdo e atributos
if($(this).val().length <= 0){
  var p = $("<p>").text("Campo obrigatório").attr("class", "triangulo").addClass('caixa').attr("id","remover");
  var nome = $("form");
  nome.append(p);
}
});
//evento de click para remover a mensagem
$('form').click(function(e){
 var removerCampoRequerido = $("p").attr('id');
 if("remover" == removerCampoRequerido){
  e.target.remove();
}
});

The form

<form id="formulario">
 <div id="tag" style="width:60%; margin:0 auto">
  <label for="nome">Nome:</label>
   <input name="nome" type="text" placeholder="Nome" id="nome" class="trazer-nome">

  <label for="cpf">CPF:</label>
   <input name="cpf" type="text" placeholder="CPF" id="cpf">

  <label for="email">E-mail:</label>
   <input name="email" type="text" placeholder="Email" id="email">
</form>

The styles to compose the message

<style>
  .caixa {
    background:blue;
    color: #fff;
    padding: 1px;
    position: relative;
    width: 130px;
    opacity: 0.70;
    margin: -30px 0 0 370px;
  }
  .triangulo:before {
    border: 10px solid transparent;
    border-bottom-color: blue;
    content: "";
    left: 20px;
    top: -20px;
    position: absolute;
  }
</style>

I’m making use of jquery.

Answer 1

You are removing because you registered the event in your Form. And whenever the message exists, by clicking on anything it will be deleted. Because your condition will always be true.

You can register the event clique directly in the control that is creating via JQuery.

// esse if adiciona a tag p com o conteúdo e atributos
if($(this).val().length <= 0){
  var p = $("<p>").text("Campo obrigatório").attr("class", "triangulo").addClass('caixa').attr("id","remover");

  p.click(function(e){
     $(this).remove();
  });

  var nome = $("form");
  nome.append(p);
}
});