Close Form Dynamically jQuery

1

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

    
asked by anonymous 12.04.2017 / 15:35

1 answer

1

I would not use [] in id, would use cloonedForm1, ids may have some incompatibilities in the way of writing. Depending on the browser and version of the DOM. In this case the incompatibility is because jQuery uses the brackets to filter several things in selector, for example input[name=nome] . Ids starting with numbers, for example, are also not recommended. To write ids, choose to use only letters, numbers only at the end. Forget any other characters or spaces.

Another mistake you made was to use the i variable in the .remover click count. Because it is only counted at the beginning of the script execution, so I changed it to:

$('#cloonedForm' + ( $('.cadastroGato').length - 1) ).remove();

And also in the replace of the id of the default object that will be cloned: var elementos = elm_html.replace('cloonedForm0', 'cloonedForm' + $('.cadastroGato').length );

It would look like this:

$(document).ready(function() {

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

  setMask();

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

    var elementos = elm_html.replace('cloonedForm0', 'cloonedForm' + $('.cadastroGato').length );
    $('#clone-form').append(elementos);
    setMask();
  });

  $('.remover').on('click', function(e) {
    e.preventDefault();
    $('#cloonedForm' + ( $('.cadastroGato').length - 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');
  }

});

And the html:

<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="cloonedForm0" 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>
    
12.04.2017 / 17:09