I added inputs dynamically, but the original is deleted

Question

I created a button to add more fields to my form, but when I click on the "-"(remove) button it not only deletes the additional fields, it should be, but also the original field.

Does anyone know how to solve this problem?

$(document).ready(function () {

    var max_fields = 10;
    var wrapper = $(".test");
    var add_button = $(".add_field");

    var x = 1;

    $(add_button).click(function (e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<input type="text" class="form-control" id="clientURL" aria-describedby="clientUrl" placeholder="URL da aplicação" /><a href = "#" class= "remove_field"> - </a>');
        }

    });

    $(wrapper).on("click", ".remove_field", function (e) {
        e.preventDefault(); $(this).parent('div').remove();
        x--;
    });



});

                <div class="form-group">
                  <div class="test">
                    <div>
                      <label for="clientSecret">URL</label>
                      <input type="text" class="form-control" id="clientURL" aria-describedby="clientUrl" placeholder="URL da aplicação" />
                      <button class="add_field">+</button>
                      <small id="client" class="form-text text-muted">Preencha com uma Url válida.</small>
                    </div>
                  </div>

                </div>

Answer 1

From what I saw in your code, you didn’t group the input with the button within the div that you want to delete in the event click.

$(document).ready(function () {
    var max_fields = 10;
    var wrapper = $(".test");
    var add_button = $(".add_field");

    var x = 1;

    $(add_button).click(function (e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div class="novos_inputs" ><label>Nova URL:</label><input type="text" class="form-control" id="clientURL" aria-describedby="clientUrl" placeholder="URL da aplicação" /><a href = "#" class= "remove_field"> - </a></div>');
        }

    });

    $(wrapper).on("click", ".remove_field", function (e) {
        e.preventDefault(); $(this).parent('div').remove();
        x--;
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg-12">
                <div class="row">
                    <div class="col-lg-12">
                         <div class="form-group">
                            <div class="test">
                              <div>
                                <label for="clientSecret">URL</label>
                                <input type="text" class="form-control" id="clientURL" aria-describedby="clientUrl" placeholder="URL da aplicação" />
                                <button class="add_field">+</button>
                                <small id="client" class="form-text text-muted">Preencha com uma Url válida.</small>
                              </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>