title: how to remove multiple div element generated by onclick using jquery
body: <p>i can add a div content using on-click and can generate it multiple or more but i also want to remove that generated div when a user click remove button. I have tried some but it only remove once. If i generated one on-click then it removed when i click remove but when i generated two or more it does not work. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
         
          $("button[name='addDom']").click(function() {
              
              var domElement = $('&lt;div class="row " id="removechild"&gt;&lt;hr&gt;&lt;div class="col-md-6 col-lg-6"&gt;&lt;div class="form-group"&gt;&lt;label class="col-md-4 control-label"&gt;First Name&lt;/label&gt;&lt;div class="col-md-4 inputGroupContainer"&gt;&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;&lt;input name="first_name" placeholder="First Name" class="form-control" type="text" required="required" style="width:200%"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label class="col-md-4 control-label"&gt;Last Name&lt;/label&gt;&lt;div class="col-md-4 inputGroupContainer"&gt;&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;&lt;input name="last_name" placeholder="Last Name" class="form-control" type="text" required="required" style="width:200%"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label class="col-md-4 control-label"&gt;Gender&lt;/label&gt;&lt;div class="col-md-4 selectContainer"&gt;&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-list"&gt;&lt;/i&gt;&lt;/span&gt;&lt;select name="gender" class="form-control selectpicker"&gt; &lt;option value=""&gt;Male&lt;/option&gt;&lt;option value=""&gt;Female&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label class="col-md-4 control-label"&gt;Date of Birth&lt;/label&gt;&lt;div class="col-md-4 inputGroupContainer"&gt;&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;&lt;input type="date" class="form-control" id="exampleInputDOB1" placeholder="Date of Birth" required="required" style="width:124%"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label class="col-md-4 control-label"&gt;Class Coordinator (if applicable)&lt;/label&gt;&lt;div class="col-md-4 inputGroupContainer"&gt;&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;&lt;input name="class_coordinator" placeholder="Class Coordinator Name" class="form-control" type="text" required="required" style="width:200%"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-md-6 col-lg-6"&gt;&lt;div class="form-group"&gt;&lt;label class="col-md-4 control-label"&gt;School Currently Attending&lt;/label&gt;&lt;div class="col-md-4 inputGroupContainer"&gt;&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;&lt;input name="school" placeholder="School Currently Attending" class="form-control" type="text" required="required" style="width:200%"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label class="col-md-4 control-label"&gt;Relation with child&lt;/label&gt;&lt;div class="col-md-4 inputGroupContainer"&gt;&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt; &lt;input name="relation" placeholder="Relation with child" class="form-control" type="text" required="required" style="width:200%"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label class="col-md-4 control-label"&gt;Types of soccercric&lt;/label&gt;&lt;div class="col-md-4 selectContainer"&gt;&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-list"&gt;&lt;/i&gt;&lt;/span&gt;&lt;select name="gender" class="form-control selectpicker"&gt;&lt;option value=""&gt;Soccer&lt;/option&gt;&lt;option value=""&gt;Cricket&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="form-group"&gt;&lt;label class="col-md-4 control-label"&gt;Child medical condition &lt;br&gt; &lt;span style="font-size:10px"&gt;Please indicate any relevant medical conditions or allergies your child may have (not required if your child has no relevant medical issues)&lt;/span&gt;&lt;/label&gt;&lt;div class="col-md-4 inputGroupContainer"&gt;&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;&lt;input name="relation" placeholder="Child medical condition" class="form-control" type="text" required="required" style="width:200%"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&lt;/div&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;button onclick="clearBox()" class="btn btn-danger"&gt;Remove Child&lt;/button&gt;&lt;hr&gt;');
              $(this).after(domElement);
          });
      
  });
  
   function clearBox(removechild)
      {
          document.getElementById('removechild').innerHTML = "";
      }
      $("#removechild").html("");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button name="addDom" class="btn btn-warning"&gt; Add Child&lt;/button&gt;</code></pre>
  </div>
  </div>
  
  look over snippet !!! how to get rid of that and any alternative solution for that ...
  Thanks in advance </p>