The form is a registration form for a hotel for cats. The tab has the option of adding more than one cat per record, so I clone the cat's registration form to include the second cat, but I can not get the clone form to be closed by a Close button. I know that because it is dynamic, I can not use .remove (), but I have tried other ways and have not been able to do so yet. Here is the code I tried the last time:
$(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><scriptsrc="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>
This is the code where I clone the form. I gave a read, and even tried other forms, but the close button always has no action at all and no errors in the log. Here is the cat registration form, it is without the form tag, but it is because I will not put the whole form here because it is very extensive