I want to remove field by field but it removes all the fields and blocks adding
var nextinput = 0;
function AgregarCampos() {
nextinput++;
var campo = '<div class="row"><div class="col-xs-4"><p><input type="text" class="form-control" \n\
id="campo" name="nombres" placeholder="Ingrese el nombre" /></p></div> <div class="col-xs-4"><input \n\
type="text" class="form-control" id="campo" name="valores" placeholder="Ingrese el valor" /></div>';
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
$("#campos").append(campo);
$("#campos").append(removeButton);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
<input onclick="AgregarCampos();" type="button" value="Agregar" class="btn btn-primary" />
</p>
<div id="campos">
</div>
The problem is that you have the
input
as a child of#campos
when you$(this).parent().remove()
delete theid #campos
and that is why no more were added. I made some modifications to your code:campo
Leave the function variable like this:inserting the button to remove the parent as you want. Then create a function to detect the
click
button's name:I leave your code working:
Hello, the problem occurs that it deletes everything because the div that contains the button that you defined ends up outside the input container div, so the only solution is to reorganize the divs.
You were embedding html like this. that's why the problem
the form correct
Here is the working solution, although I changed a couple of things. Cheers