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');
}
});
label {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<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>
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