0

Estou tentando fazer um botão de remover um campo Dinâmico, meu Botão de adicionar o campo está funcionando pois precisava um para remover também até então tenho somente o botão a função não consegui cria lá

<!-- Select Basic -->
        <form>
          <div class="form-group" id="testescript">
            <label class="col-md-4 control-label" for="txtgrupo">Tramox </label>
            <div class="col-md-2">
              <select id=teste class="form-control">
                <option>#</option>
                <option>#</option>
              </select>
            </div>
          </div>
          <div class="col-md-8">
            <button type="button" id="add-campo" class="btn btn-primary">Adicionar Campo</button>
            <button type="button" id="rm-campo" class="btn btn-primary">Remover Campo</button>
          </div>
        </form>

        <br>

        <script>
          $("#add-campo").click(function() {

            $("#testescript").append('<div class="col-md-2"><select id=cbPais class="form-control"><option>#</option><option>#</option>);

          });
    </script>

1 Resposta 1

0

var start = 1;
$(".add").click(function() {
  $(".fields").append("<button class='btn btn-remove'>#" + start + " Clique para apagar</button>");
  start++;
});
$('body').on('click', '.btn-remove', function() {
  $(this).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='fields'>

</div>
<a href='#' class='add'>Adicionar Campo</a>

Você pode utilizar um evento para captura dinâmica dos elementos:

$('body').on('click', '.campo-a-ser-removido', function() {
    $(this).remove();
});

segue ex no js fiddle https://jsfiddle.net/cq0zr7y2/

3
  • Não funcionou amigo :(
    – user144273
    Commented 16/04/2019 às 19:56
  • note que .campo-a-ser-removido é a classe do campo que esta sendo adicionado dinamicamente. no caso você nao usa classe e sim um id entao mude para #cbPais Commented 16/04/2019 às 20:16
  • olha ex no jsfiddle que eu adicionei Commented 16/04/2019 às 20:21

Você deve fazer log-in para responder a esta pergunta.