Script deleting other html elements

Asked

Viewed 48 times

-1

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.

  • It would not be better to create a function to hide the message, and set this function in the "onclick" component event ?

  • Hide the "p" tag in css, and in jquery listen to the click event by doing a "show"? @Brennosegolim

  • But in that case you would have to add the "p" tag across the fields or multiple "span"

1 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);
}
});
  • Now I get it, I was trying to listen to the event by the father who is the form, like Event bublling in javascript. Could you explain to me why you don’t need to search for the "p"?

  • Because as you already have the reference to it in javascript o this within the event clique that was assigned to him, ends up being himself.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.