Fechar Formulario Dinamicamente jQuery


(Felipe Jardim Evangelista) #1

O formulário é uma ficha de cadastro para um hotel para gatos. A ficha tem a opção de adicionar mais de um gato por cadastro, então eu clono o formulário de cadastro do gato para que seja feita a inclusão do segundo gato, mas eu não consigo fazer com que o formulário clone seja fechado por um botão Fechar. Eu sei que, por ser dinâmico, não dá pra utilizar o .remove(), mas eu tentei outras formas e não consegui ainda. Segue o código da ultima forma que tentei:

$(document).ready(function(){

var elm_html = $('#clone-form').html();  
var remover = document.getElementById('remove');
var i = $('.cadastroGato').length; 
setMask();

$(document).on('click', '.clonador', function(e){
  e.preventDefault();
  remover.style.display="inline-block"; 

  var elementos = elm_html.replace(/\[[0\]]\]/g, '['+i+++']');  
  $('#clone-form').append(elementos);
  setMask();
});

$('.remover').on('click', function(e) {
    e.preventDefault();
  $(this).parent('#cloonedForm[' + (i-1) + ']').remove();
})

if (i == 0 ) {
    remover.style.display = "none";
}

function setMask(){
  $('.rg').mask('00.000.000-0');
  $('.cpf').mask('000.000.000-00');
  $('.cep').mask('00000-000');
  $('.res').mask('(00) 0000-0000');
  $('.cel').mask('(00) 00000-0000');
  $('.date').mask('00/00/0000');
}

});

Esse é o código onde eu clono o formulário. Dei uma lida, e até tentei outras formas, mas o botão fechar sempre fica sem ação nenhuma e sem nenhum erro no log. Segue o formulário de cadastro do gato, está sem a tag form, mas é porque não vou colocar o formulário todo aqui por ser bem extenso

<div id="clone-form">
                                <div id="cloonedForm[0]" class="cadastroGato" style="margin-top: 70px;">
                                    <h3>Dados do gato</h3>
                                    <hr style="margin-bottom: 70px;" class="hr-color2"/>

                                    <label>
                                        <input type="text" name="nome-gato[0]" placeholder="Nome*:" value=""
                                                data-constraints="@Required"/>
                                        <span class="empty-message">*Campo obrigatório</span>
                                    </label>

                                    <label>
                                        <input type="text" name="apelido[0]" placeholder="Apelidos*:" value=""
                                                data-constraints="@Required"/>
                                        <span class="empty-message">*Campo obrigatório</span>
                                    </label>

                                    <label>
                                        <input type="text" class="date" name="nascimento[0]" placeholder="Data de nascimento*:" value=""
                                                data-constraints="@Required"/>
                                        <span class="empty-message">*Campo obrigatório</span>
                                    </label>

                                   <label>
                                        <input type="text" name="raca[0]" placeholder="Raça*:" value=""
                                                data-constraints="@Required"/>
                                        <span class="empty-message">*Campo obrigatório</span>
                                    </label>

                                    <label>
                                        <input type="text" name="cor[0]" placeholder="Cor*:" value=""
                                                data-constraints="@Required"/>
                                        <span class="empty-message">*Campo obrigatório</span>
                                    </label>

                                    <select name="sexo[0]">
                                        <option class="selectClass" value="masc">Sexo*:</option>
                                        <option class="selectClass" value="masc">Masculino</option>
                                        <option class="selectClass" value="fem">Feminino</option>
                                    </select>

                                    <label>
                                        <input type="text" class="date" name="vacina[0]" placeholder="Última vacinação*:" value=""
                                                data-constraints="@Required"/>
                                        <span class="empty-message">*Campo obrigatório</span>
                                    </label>

                                    <label>
                                        <input type="text" class="date" name="antirrabica[0]" placeholder="Antirrábica*:" value=""
                                                data-constraints="@Required"/>
                                        <span class="empty-message">*Campo obrigatório</span>
                                    </label>

                                    <p><label>
                                        Vacinas em dia?<br>
                                        <input type="radio" name="vacinas[0]" value="sim" required>Sim
                                        <input type="radio" name="vacinas[0]" value="nao">Nao
                                    </label></p>

                                    <label onclick="alergiaQual()">
                                        Tem alguma doença ou alergia? 
                                        <input type="radio" name="alergia[0]" value="sim" required>Sim
                                        <input type="radio" name="alergia[0]" value="nao">Nao
                                    </label>

                                    <label id="qualAlergia" style="visibility: hidden;">
                                        <input type="text" name="qual[0]" placeholder="Qual?" value=""/>            
                                    </label>

                                    <label class="register">
                                        Castrado?<br />
                                        <input type="radio" name="castrado[0]" value="sim" required>Sim
                                        <input type="radio" name="castrado[0]" value="nao">Nao
                                    </label>

                                    <label onclick="medicacao()">
                                        Toma alguma medicação?<br>
                                        <input type="radio" name="medicacao[0]" value="sim" required>Sim
                                        <input type="radio" name="medicacao[0]" value="nao">Nao
                                    </label>

                                    <label id="qualMedicacao" style="visibility: hidden;">
                                        <input type="text" name="med[0]" placeholder="Qual?" value=""/>            
                                    </label>
                                        <br>
                                    <label onclick="alimentacao()">
                                        Necessita alimentação especial? <br>
                                        <input type="radio" name="alimentacao[0]" value="sim" required>Sim
                                        <input type="radio" name="alimentacao[0]" value="nao">Nao
                                    </label>

                                    <label id="qualAlimentacao" style="visibility: hidden;">
                                        <input type="text" name="alimentacaoo[0]" placeholder="Qual?" value=""/>            
                                    </label>
                                        <br>
                                    <label onclick="fiv()">
                                        Já realizou teste para FIV e FELV? <br>
                                        <input type="radio" name="teste[0]" value="sim" required>Sim
                                        <input type="radio" name="teste[0]" value="nao">Nao
                                    </label>

                                    <label id="testeFiv" class="register" style="display: none;">
                                        <input type="radio" name="fiv[0]" value="posfiv">Positivo para FIV
                                        <input type="radio" name="fiv[0]" value="posfelv">Positivo para FELV
                                        <input type="radio" name="fiv[0]" value="posambos">Positivo para ambos
                                        <input type="radio" name="fiv[0]" value="negambos">Negativo para ambos
                                    </label>

                                    <label class="register">
                                        Já ficou em hotelzinho antes?
                                        <p><input type="radio" name="hotelzinho[0]" value="sim" required>Sim
                                        <input type="radio" name="hotelzinho[0]" value="nao">Nao</p>
                                    </label>


                                    <label class="message">
                                        <textarea name="temperamento[0]" placeholder="Descreva o temperamento do seu gato (exemplo: tímido, assustado, carinhoso, agressivo, etc)*:" data-constraints='@Required @Length(min=20,max=999999)' data-constraints="@Required"></textarea>
                                        <span class="empty-message">*Campo obrigatório</span>
                                    </label>

                                    <label class="message">
                                        <textarea name="descricao[0]" placeholder="Descreva a rotina do seu gato (o que gosta, não gosta, hábitos, etc)*:" 
                                         data-constraints='@Required @Length(min=20,max=999999)' data-constraints="@Required"></textarea>
                                        <span class="empty-message">*Campo obrigatório</span>
                                    </label>
                                </div>
                                <div id="status" style="visibility: hidden;"></div>
                            </div>
                                <button type="button" class="clonador">Adicionar Gato</button>
                                <button type="button" id="remove" class="remover" style="display: none;">Remover Gato</button>
                                <button type="submit" id="enviar"  name="submit">Enviar</button>

(Luã Ciceri Schwertner) #2

@jardimfelipe vi aqui que a váriavel i está com valor 1 inicial e o seu primeiro form é 0... Comece a debugar o código par ver o que está fazendo, joga uns console na função.