Delete fields with Javascript

Hello the problem happens that it erases everything because the div that contains the button that you defined ends outside the div container of the input, so the solution is only to reorganize the divs.

You were embedding html in this way. why the problem

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

the correct way

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

Here the solution works, although I change a couple of things. Greetings

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>

The problem is that you have the input as a child of #campos when doing $(this).parent().remove() you eliminate the id #campos and that's why they were not added anymore. I made some modifications to your code:

The variable campo of the function leaves it this way:

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>';

putting the button to eliminate the father as you want it. Then create a function to detect the click of the button:

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

I leave your code working:

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>