2

Tenho um campo de texto com um botão de adicionar ao lado. Quanto clico no botão ele adiciona outro campo de texto com um botão de remover ao lado. A idéia é que quando clico nos sucessivos botões de remover, ele remova os campos de texto; mas não importa qual clico, não funciona!

Também gostaria de saber se há um jeito de não utilizar o comando e.preventDefault().

Usando Chrome 56.0.2924.87, Bootstrap 3.2.1, Jquery 3.1.1 (JsFiddle aqui)

<form id="certameForm" class="form-horizontal" method="POST" action="teste_stack_overflow_01.php">

    <div class="container">

        <!-- Dt Pub DOM -->
        <div class="form-group">
            <div class="col-sm-11 inputGroupContainer">
                <label class="col-sm-2 control-label">Dt Pub DOM</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control" id="dt_pub_dom[]" name="dt_pub_dom[]" placeholder="Data de Pub. Dom." value="" />
                </div>
                <div class="col-sm-2">
                    <button class="btn btn-primary btn-md" id="add" name="add"><span class="glyphicon glyphicon-plus"></span></button>
                </div>
            </div>
        </div>
        <!-- Dt Pub DOM -->

        <input type="hidden" id="id_pmc_reuniao" name="id_pmc_reuniao" value="">

    </div>

</form>

<script type="text/javascript">
$(document).ready(function() {

    var btCount = 1;

    $('#add').on("click", function(e) {

        btCount = btCount + 1;

        e.preventDefault();            
        $(this)
            .closest('div.form-group')              // find the div with class '.forg-group' 
            .clone()                                // clone it
            .insertBefore('#id_pmc_reuniao');       // and insert it before input text with id='id_pmc_reuniao'  

        $('.btn-md:last')                           // find the last button with class '.btn-md' and remove it 
            .remove();             

        $('.col-sm-2:last')                         // find the last div with class '.col-sm-2' and create another button but with the minus sign
            .html('<button class=\"btn btn-primary btn-md\" id=\"n' + btCount + '\" name=\"n' + btCount + '\">\n\
                   <span class=\"glyphicon glyphicon-minus\"></span></button>'); 
    });    


    $("button[id^='n']").
            on('click', function() {
                e.preventDefault(); 
        alert('clicou');
    });


});
</script>
9
  • 1
    Tenta colocar esse código dentro do onclick do #add, no final dele. E remove o código que você tem no onclick do remover. $('button[id^=n]').unbind("click").on("click", function(e) { e.preventDefault(); $(this).parent().parent().remove(); });
    – Augusto
    24/03/2017 às 19:42
  • Tava estudando uma forma de solucionar esse erro e de repente me deparei com sua solução. Blz!!! deu certinho!!!
    – user60252
    24/03/2017 às 20:38
  • Que bom @LeoCaracciolo, vou criar uma resposta então.
    – Augusto
    24/03/2017 às 20:51
  • É isso ai, já vou dar um "essa resposta é util"
    – user60252
    24/03/2017 às 20:56
  • 1
    Blz @RogerBastida, retirei a minha resposta!
    – user60252
    27/03/2017 às 13:20

1 Resposta 1

1

Altere seu javascript, usando o unbind para remover o evento click, e coloque dentro da função de adicionar, para que toda vez que criar um elemento novo ele remove os eventos e cria de novo. Também adicionei 2 parent para remover o elemento todo, se não quiser pode tirar.

As of jQuery 3.0, .unbind() has been deprecated. It was superseded by the .off() method since jQuery 1.7, so its use was already discouraged.

<script type="text/javascript">
$(document).ready(function() {

    var btCount = 1;

    $('#add').on("click", function(e) {

        btCount = btCount + 1;

        e.preventDefault();            
        $(this)
            .closest('div.form-group')              // find the div with class '.forg-group' 
            .clone()                                // clone it
            .insertBefore('#id_pmc_reuniao');       // and insert it before input text with id='id_pmc_reuniao'  

        $('.btn-md:last')                           // find the last button with class '.btn-md' and remove it 
            .remove();             

        $('.col-sm-2:last')                         // find the last div with class '.col-sm-2' and create another button but with the minus sign
            .html('<button class=\"btn btn-primary btn-md\" id=\"n' + btCount + '\" name=\"n' + btCount + '\">\n\
                   <span class=\"glyphicon glyphicon-minus\"></span></button>'); 

        $('button[id^=n]').unbind("click").on("click", function(e) {
            e.preventDefault(); 
            $(this).parent().parent().parent().remove(); 
        });
    });    

    $('button[id^=n]').unbind("click").on("click", function(e) {
        e.preventDefault(); 
        $(this).parent().parent().parent().remove(); 
    });

});    

2
  • @LeoCaracciolo , por que é necessário repetir esta linha $('button[id^=n]').unbind("click").on("click" .. dentro do onclick do #add sendo que ja existe outro fora com $('button[id^=n]') ... ? 14/07/2017 às 14:03
  • 1
    @RogerBastida para colocar o evento no click do novo elemento criado. O outro que fira fora seria para colocar o evento em elementos já criados, por exemplo, que vieram do PHP
    – Augusto
    28/07/2017 às 14:53

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .