How to dynamically create and remove div's with inputs with jquery

Question:

I need to dynamically create and remove div´s for a form I have, I've done it using a table, but now I was asked for div´s . I tried to make an adaptation but I couldn't, what I need is to create a button to insert the div´s and one to remove them if necessary.

My complete form was:

<section>
   <div class="container">
      <div class="container">
         <div class="row">
            <header class="text-center margin-top-20">
               <h4 align="center">Preencha os campos para gerar a impressão do termo</h4>
            </header>
            <br>                    
            <header class="text-center margin-top-20">
               <h4 align="center">Informações Autorizador</h4>
            </header>
            <br>                    
            <div class="col-sm-1"></div>
            <div class="col-sm-10">
               <form id="frmCadastro" class="sky-form clearfix" action="" method="post" target="_blank">
                  <div class="row">
                     <div class="col-md-4 col-sm-4">
                        <input type="text" name="NomeAutorizador" id="NomeAutorizador" value="" class="form-control required" tabindex="2" placeholder="Nome">
                        <i class="fancy-arrow"></i> 
                     </div>
                     <div class="col-md-4 col-sm-4">
                        <input type="text" name="NacAutorizador" id="NacAutorizador" value="" class="form-control required" tabindex="2" placeholder="Nacionalidade">
                        <i class="fancy-arrow"></i> 
                     </div>
                     <div class="col-md-4 col-sm-4">
                        <input type="text" name="ProfAutorizador" id="ProfAutorizador" value="" class="form-control required" tabindex="2" placeholder="Profisssão">
                        <i class="fancy-arrow"></i> 
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6 col-sm-6">
                        <input type="text" name="CPFAutorizador" id="CPFAutorizador" value="" class="form-control required" tabindex="2" placeholder="CPF">
                        <i class="fancy-arrow"></i> 
                     </div>
                     <div class="col-md-6 col-sm-6">
                        <input type="text" name="RGAutorizador" id="RGAutorizador" value="" class="form-control required" tabindex="2" placeholder="RG">
                        <i class="fancy-arrow"></i> 
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6 col-sm-6">
                        <input type="text" name="EndAutorizador" id="EndAutorizador" value="" class="form-control required" tabindex="2" placeholder="Endereço">
                        <i class="fancy-arrow"></i> 
                     </div>
                     <div class="col-md-4 col-sm-4">
                        <input type="text" name="CidadeAutorizador" id="CidadeAutorizador" value="" class="form-control required" tabindex="2" placeholder="Cidade">
                        <i class="fancy-arrow"></i> 
                     </div>
                     <div class="col-md-2 col-sm-2">
                        <input type="text" name="UFAutorizador" id="UFAutorizador" value="" class="form-control required" tabindex="2" placeholder="UF">
                        <i class="fancy-arrow"></i> 
                     </div>
                  </div>
                  <header class="text-center margin-top-20">
                     <h4 align="center">Informações Autorizado</h4>
                  </header>
                  <br/>                       
                  // ESSA ROW QUE PRECISO INSERIR 
                  <div class="row">
                     <div class="col-md-4 col-sm-4">
                        <input type="text" name="NomeAutorizado" id="NomeAutorizado" value="" class="form-control required" tabindex="2" placeholder="Nome">
                        <i class="fancy-arrow"></i> 
                     </div>
                     <div class="col-md-4 col-sm-4">
                        <input type="text" name="CPFAutorizado" id="CPFAutorizado" value="" class="form-control required" tabindex="2" placeholder="CPF">
                        <i class="fancy-arrow"></i> 
                     </div>
                     <div class="col-md-4 col-sm-4">
                        <input type="text" name="RGAutorizado" id="RGAutorizado" value="" class="form-control required" tabindex="2" placeholder="RG">
                        <i class="fancy-arrow"></i> 
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-4 col-sm-4">
                        <input type="text" name="BancoAutorizado" id="BancoAutorizado" value="" class="form-control required" tabindex="2" placeholder="Banco">
                        <i class="fancy-arrow"></i> 
                     </div>
                     <div class="col-md-4 col-sm-4">
                        <input type="text" name="AgenciaAutorizado" id="AgenciaAutorizado" value="" class="form-control required" tabindex="2" placeholder="Agência">
                        <i class="fancy-arrow"></i> 
                     </div>
                     <div class="col-md-4 col-sm-4">
                        <input type="text" name="CCAutorizado" id="CCAutorizado" value="" class="form-control required" tabindex="2" placeholder="Conta Corrente">
                        <i class="fancy-arrow"></i> 
                     </div> 
                  </div>
                  // ESSA ROW QUE PRECISO INSERIR**

                  <header class="text-center margin-top-20">
                     <h4 align="center">Local</h4>
                  </header>
                  <br/>    
                  <div class="row">
                     <div class="form-group">
                        <div class="col-md-12 col-sm-12">
                           <select name="Unicoop" class="form-control pointer required" id="Unicoop">
                              <option value="0">Unicoop</option>
                              <?php foreach ($ResUnicoop as $Unicoop) { ?>
                              <option value="<?php echo $Unicoop->IdUnicoop ?>"><?php echo $Unicoop->Nome ?></option>
                              <?php } ?>
                           </select>
                           <i class="fancy-arrow"></i> 
                        </div>
                     </div>
                  </div>

               </form>

              <div class="row">
                 <div class="col-md-12">
                    <button class="btn btn-primary  pull-right btn-block">IMPRIMIR</button>
                 </div>
              </div>                                   


               <div id="msgBusca" style="padding: 10px;">
                  <!-- Mensagens --> 
               </div>
            </div>
            <div class="col-sm-1"></div>
         </div>
      </div>
   </div>
</section>

I have several rows in this form, but the one I need to insert the most is this one:

<div class="row">
 <div class="col-md-4 col-sm-4">
    <input type="text" name="BancoAutorizado" id="BancoAutorizado" value="" class="form-control required" tabindex="2" placeholder="Banco">
    <i class="fancy-arrow"></i> 
 </div>
 <div class="col-md-4 col-sm-4">
    <input type="text" name="AgenciaAutorizado" id="AgenciaAutorizado" value="" class="form-control required" tabindex="2" placeholder="Agência">
    <i class="fancy-arrow"></i> 
 </div>
 <div class="col-md-4 col-sm-4">
    <input type="text" name="CCAutorizado" id="CCAutorizado" value="" class="form-control required" tabindex="2" placeholder="Conta Corrente">
    <i class="fancy-arrow"></i> 
 </div>
</div>

My form has this ID:

<form id="frmCadastro" class="sky-form clearfix" action="" method="post" target="_blank">

I won't post what I tried to do because honestly it won't be of any use.

Answer:

I suggest you create a div to .row you want to add. Why? Because it will make adding the new .row . As they are loose in the middle of the <form> , it would be too complicated to add the new ones.

I created a div with id="dadosbanco" and put the two .row inside it. This way we will have this div as a reference and the work becomes extremely simple.

I created an Add button to add the new .row and a Remove button on each line to remove the respective line. I also put a code in the function that prevents all lines from being removed, and at least one must remain.

See the example below that you should adapt to your Bootstrap:

var cloneform = $('#dadosbanco').html();
$(document).on('click','.remDiv, .addDiv', function(e){
   var thisClass = Array.from(e.target.classList);
   ~thisClass.indexOf('remDiv')
      ?
      ($('.remDiv').length > 1
         ?
         $(this).closest('.row').prev().add($(this).closest('.row')).remove()
         :
         0)
      :
      $('#dadosbanco').append(cloneform);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmCadastro" class="sky-form clearfix" action="" method="post" target="_blank">

OUTRAS DIVS E CONTEÚDO AQUI

<div id="dadosbanco">
   <div class="row">
      <div class="col-md-3 col-sm-3">
         <input type="text" name="NomeAutorizado[]" id="NomeAutorizado" value="" class="form-control required" tabindex="2" placeholder="Nome">
         <i class="fancy-arrow"></i> 
      </div>
      <div class="col-md-3 col-sm-3">
         <input type="text" name="CPFAutorizado[]" id="CPFAutorizado" value="" class="form-control required" tabindex="2" placeholder="CPF">
         <i class="fancy-arrow"></i> 
      </div>
      <div class="col-md-3 col-sm-3">
         <input type="text" name="RGAutorizado[]" id="RGAutorizado" value="" class="form-control required" tabindex="2" placeholder="RG">
         <i class="fancy-arrow"></i> 
      </div>
   </div>
   <div class="row">
      <div class="col-md-3 col-sm-3">
         <input type="text" name="BancoAutorizado[]" id="BancoAutorizado" value="" class="form-control required" tabindex="2" placeholder="Banco">
         <i class="fancy-arrow"></i> 
      </div>
      <div class="col-md-3 col-sm-3">
         <input type="text" name="AgenciaAutorizado[]" id="AgenciaAutorizado" value="" class="form-control required" tabindex="2" placeholder="Agência">
         <i class="fancy-arrow"></i> 
      </div>
      <div class="col-md-3 col-sm-3">
         <input type="text" name="CCAutorizado[]" id="CCAutorizado" value="" class="form-control required" tabindex="2" placeholder="Conta Corrente">
         <i class="fancy-arrow"></i> 
      </div>
      <div class="col-md-3 col-sm-3">
         <input type="button" value="Remover" class="remDiv btn btn-styles" />
      </div>
   </div>
</div>
<br />

<input type="button" value="Adicionar" class="addDiv" />

<br />
MAIS DIVS E CONTEÚDO AQUI

</form>

GRADES

  • Added [] to field names to be sent in array form.
  • Regarding the id 's of the fields, if they are not to be used, I suggest you remove them, because when you create a new line, the id 's will be repeated and this will cause problems if you are using them. I suggest instead of id 's use classes.
Post Views: 4
Scroll to Top