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>