1

estoy agregando inputs al presionar el botón agregar y también quiero eliminarlos al presionar el menos. El primero no lo quiero quitar por eso le puse una clase de no-remove, el problema es que solo puedo eliminar los que cree en el html, pero no los que cree en el jQuery.

¿Hay una explicación para esto? Quizás hay otra forma de eliminar los elementos que creé en el jQuery, intente usar remove() y tampoco se elimina. No se que estoy haciendo mal:

$(document).ready(function(){
       
       $('.remove').click(function(){

           $(this).css("display","none");


       })


       $('.add').click(function(){


         const formulario = $(".formulario");
         const div = $("<div>");
         const input = $("<input>");
        

         div.addClass("remove");
         div.text("-");
         
         input.attr("type" , "text");
         input.attr("name" , "");
         input.attr("placeholder" , "Ingrese un nombre");

         formulario.append(div);
         div.append(input);

       })

         
       
})
.remove , .no-remove{

    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
}

.add{

    cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>

    <form class="formulario">
        <div class="no-remove">-
            <input type="text" name="" placeholder="Ingrese un nombre">
        </div>
        <div class="remove">-
            <input type="text" name="" placeholder="Ingrese un nombre">
        </div>
    </form>
     <br>
    <input type="submit" class="add" value="Agregar" />

</body>
</html>

1
  • Lee esta respuesta ahí se explica porqué solo funciona con los elementos que ya existen.
    – Triby
    Commented el 31 ene. 2021 a las 1:57

1 respuesta 1

1

Lo que te esta pasando es que cuando creas elementos con jQuery en tiempo de ejecuccion no están disponibles en el DOM y los eventos que tenemos asociados a esos elementos no van a funcionar.

Para ello tenemos que utilizar la delegación de eventos Más info aqui.

Básicamente hay que utilizar un selector de jQuery sobre un elemento que ya este en el DOM. Puedes hacerlo de la siguiente manera:

$('.formulario').on('click', '.remove', function() {
   $(this).parent().hide();
})

Si te fijas, estamos haciendo el selector sobre la clase .formulario (que ya estaba en el DOM) y luego en el .on() le decimos que mire el evento click sobre la clase .remove. También te serviría hacerlo sobre document o body.

Aparte de eso, hay otro error en tu ejemplo. El evento .click() lo tienes aplicado sobre el <div> entero, asi que al hacer click sobre cualquier parte del <div> se ocultaría. Deberías de añadirle una clase al simbolo de menos (-) y aplicar el evento sobre ella.

Aplicando las dos cosas que te comento, tu ejemplo debería de quedar algo asi:

$(document).ready(function() {

  $('.formulario').on('click', '.remove', function() {
    $(this).parent().hide();
  })

  $('.add').click(function() {


    const formulario = $(".formulario");
    const div = $("<div>");
    const input = $("<input>");

    input.attr("type", "text");
    input.attr("name", "");
    input.attr("placeholder", "Ingrese un nombre");

    formulario.append(div);
    div.append("<span class='remove'>-</span>")
    div.append(input);

  })



})
.remove,
.no-remove {
  font-size: 25px;
  font-weight: bold;
  cursor: pointer;
}

.add {
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <form class="formulario">
    <div>
      <span class="no-remove">-</span>
      <input type="text" name="" placeholder="Ingrese un nombre">
    </div>
    <div>
      <span class="remove">-</span>
      <input type="text" name="" placeholder="Ingrese un nombre">
    </div>
  </form>
  <br>
  <input type="submit" class="add" value="Agregar" />

</body>

</html>

1
  • Muchas gracias, no lo podía solucionar, me sirvió de gran ayuda, Saludos Aitor :D !
    – computer
    Commented el 2 feb. 2021 a las 14:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.