2

Quiero quitar campo por campo pero me quita todos los campos y bloquea agregar

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>

1
  • si cada vez que des click en agregar se agregan lo dos input pero al mometo que quero eliminar campo por campo me elimina todos y me bloquea el boton agregar Commented el 30 mar. 2017 a las 21:02

2 respuestas 2

1

Hola el problema ocurre que borra todo porque el div que contiene el boton que definiste termina afuera del div contenedor de los input, por lo que la solucion solo es reorganizar los divs.

Estabas incrustando html de esta forma. por eso el problema

<div class="row"> 
    <div class="col-xs-5"> 
        <input type="text"  class="form-control" name="nombres" placeholder="Ingrese el nombre" />
    </div>
    <div class="col-xs-5">
    <input type="text"  class="form-control"  id="campo" name="valores" placeholder="Ingrese el valor" />
        </div>
</div>
<div class="col-xs-2">
    <button type="button">-</button>
</div>

la forma correcta

<div class="row"> 
    <div class="col-xs-5"> 
        <input type="text"  class="form-control" name="nombres" placeholder="Ingrese el nombre" />
    </div>
    <div class="col-xs-5">
    <input type="text"  class="form-control"  id="campo" name="valores" placeholder="Ingrese el valor" />
        </div>
    <div class="col-xs-2">
        <button type="button">-</button>
    </div>
</div>

Aqui la solucion funcionando, aunque cambie un par de cosas. Saludos

var nextinput = 0;


function AgregarCampos() {
  nextinput++;
  var content = '<div class="row">' +
    '<div class="col-xs-5">' +
      '<input type="text"  class="form-control" name="nombres" placeholder="Ingrese el nombre" />' +
    '</div>' +
    '<div class="col-xs-5">' +
      '<input type="text"  class="form-control"  id="campo" name="valores" placeholder="Ingrese el valor" />' +   '</div>' +
    '<div class="col-xs-2">' +
      '<button type="button">-</button>' +  
    '</div>' +
  '</div>';
  
  $("#campos").append(content);
  $("button").click(function() {
    $(this).closest('div.row').remove();
  });

}
<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>

1

El problema esta en que tienes el input como hijo de #campos al hacer $(this).parent().remove() eliminas el id #campos y por eso ya no se agregaban más. Hice unas modificaciones a tu código:

La variable campo de la función la deje de esta forma:

var campo = '' +
'<div class="row">' +
  '<div class="col-xs-4">' +
    '<p><input type="text"  class="form-control" id="campo" name="nombres" placeholder="Ingrese el nombre" /></p>' +
  '</div>' +
  '<div class="col-xs-4">' +
    '<input type="text"  class="form-control"  id="campo" name="valores" placeholder="Ingrese el valor" />' +
  '</div>'+
  '<input type="button" class="remove" value="-" />'+
'</div>';

metiendo el botón para eliminar al padre tal como lo quieres tu. Después cree una función para detectar el click del botón:

$('#campos').on('click', '.remove', function() {
  //console.log(this);
  $(this).parent().remove();
});

Te dejo tu código funcionando:

var nextinput = 0;

function AgregarCampos() {
  nextinput++;
  var campo = '' +
    '<div class="row">' +
      '<div class="col-xs-4">' +
        '<p><input type="text"  class="form-control" id="campo" name="nombres" placeholder="Ingrese el nombre" /></p>' +
      '</div>' +
      '<div class="col-xs-4">' +
        '<input type="text"  class="form-control"  id="campo" name="valores" placeholder="Ingrese el valor" />' +
      '</div>'+
      '<input type="button" class="remove" value="-" />'+
    '</div>';
  $("#campos").append(campo);
}

$('#campos').on('click', '.remove', function() {
  //console.log(this);
  $(this).parent().remove();
});
<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>

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.