title: onClick completely remove a specific DIV
body: <p><img src="https://i.stack.imgur.com/vFugD.png" alt="enter image description here"></p>
  
  <p>HTML page .....................................................................</p>
  
  <pre><code>   &lt;form:form method="post" action="saveMiData.action" id="minorityForm"
                  commandName="MinInterestModel"&gt;
                  &lt;div id="addMoreDiv"&gt;
                  &lt;label id="validNumber" style="display: none; color: #b94a48;"&gt;&lt;spring:message
                                      code="Minority.validNumber" /&gt;&lt;font color="#b94a48"&gt;*&lt;/font&gt;&lt;/label&gt;
                      &lt;div id="preacq" class="MICss"&gt;
                          &lt;div id="linkopen"&gt;
                              &lt;div class="span5"&gt;
                                  &lt;label class="abc" style="margin-bottom: 1px;"&gt; &lt;spring:message
                                          code="MinorityInterest.elementName" /&gt;&lt;/label&gt;
                                  &lt;form:select id="glListName0" path="glElementId"
                                      name="glListName" class="input-block-level" size="1" multiple="bbn"&gt;
                                  &lt;/form:select&gt;
                              &lt;/div&gt;
  
                              &lt;div class="span5"&gt;
                                  &lt;label class="abc" style="margin-bottom: 1px;"&gt; &lt;spring:message
                                          code="MinorityInterest.AccountType" /&gt;&lt;/label&gt;
                                  &lt;form:select path="accountType" id="accountName0"
                                      name="accountName" class="input-block-level" multiple="bbn"&gt;
                                      &lt;option value="0"&gt;select&lt;/option&gt;
                                      &lt;option value="1"&gt;Debit&lt;/option&gt;
                                      &lt;option value="2"&gt;Credit&lt;/option&gt;
                                  &lt;/form:select&gt;
                              &lt;/div&gt;
  
                              &lt;div class="span5"&gt;
  
                                  &lt;label class="abc" style="margin-bottom: 1px;"&gt;&lt;spring:message
                                          code="MinorityInterest.preAcq" /&gt;&lt;/label&gt; &lt;input type="text"
                                      name="preAcqSurPlus" id="preacqas0" class="input-block-level abc"
                                      path="preAcqSurPlus"&gt;&lt;/input&gt;
                              &lt;/div&gt;
  
                              &lt;div class="span5"&gt;
                                  &lt;label class="abc" style="margin-bottom: 1px;"&gt; &lt;spring:message
                                          code="MinorityInterest.Share" /&gt;&lt;/label&gt; &lt;input type="text"
                                      name="Shares" id="share0" path="Shares" class="input-block-level abc"&gt;&lt;/input&gt;
                              &lt;/div&gt;
  
                              &lt;div class="span2" style="margin-top: 15px;"&gt;
                                              &lt;div class="add_remove"&gt;
                                                  &lt;a&gt;&lt;img onclick="addMore()"
                                                      src="&lt;%=Config.getStaticURL()%&gt;resources/img/Add-field.png" /&gt;&lt;/a&gt;
                                              &lt;/div&gt;
                                              &lt;div class="add_remove"&gt;
                                                  &lt;a&gt;&lt;img onclick="removeMI(this)" src= "&lt;%=Config.getStaticURL()%&gt;resources/img/remove-field.png" /&gt;&lt;/a&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;script type="text/javascript"&gt;
                              function addMore() {
                              //  alert("adddiv");
                                  $("#preacq").clone().attr('id', 'preacq'+ cloneCount++).appendTo("#addMoreDiv");
                              }
  
                          &lt;/script&gt;
      &lt;script&gt;
  
  function removeMI(an){
  //  alert($(this).attr('id'));
  $(this).remove();
              alert("vaibhavremove"+an);
  
               //  alert($('#preacq0').attr('id','preacq0'+ cloneCount--).remove());
  
              if(cloneCount==1){
                    alert("No more textbox to remove");
                    return false;
                 }   
  
          //  cloneCount--;
                 $("#preacq" + cloneCount).remove();
  }
  &lt;/script&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="span5" style="float: left;width:38%"&gt;
              &lt;label class="abc" style="margin-bottom: 1px; margin-top:67px;  font-size: 17px; margin-left: 347px;"&gt; &lt;spring:message
                                          code="MinorityInterest.TotalAmount" /&gt;&lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;div class="span5" style="float: right;"&gt;
                      &lt;input type="text" style="margin-top: 67px;margin-left: -135px;width: 211px;"&gt;
                  &lt;/div&gt;
                  &lt;div class="span5" style="float: right;"&gt;
                      &lt;input type="text" style="margin-top:67px;margin-left: -158px;width: 211px;"&gt;
                  &lt;/div&gt;
                  &lt;form:hidden path="parenCompanyId" id="PcId"/&gt;
                  &lt;form:hidden path="childCompanyId" id="CcId"/&gt;
                  &lt;form:hidden path="financialYearId" id="FyId"/&gt;
                  &lt;form:hidden path="reportingPeriodId" id="rPId"/&gt; 
                  &lt;div class="span6" style="float: right; margin-right: 0%"&gt;
                      &lt;!-- &lt;input id="saveMI" class="" type="button" value="Save" onclick="saveMI();"&gt; --&gt;
                      &lt;button id="saveButtonId" name="save" value="save" onclick="saveMI();"
                          style="height: 30px; width: 50px;position: fixed; top: 627px;"&gt;save&lt;/button&gt;
                  &lt;/div&gt;
  
              &lt;/form:form&gt;
          &lt;/div&gt;
  My approach on removal function:
  
      function removeMI(){
          alert("vaibhavremove");
          //  alert($('#preacq0').attr('id','preacq0'+ cloneCount--).remove());
          if(cloneCount==1){
              alert("No more textbox to remove");
              return false;
          }   
          cloneCount--;
          $("#preacq0" + cloneCount).remove();
      }
  </code></pre>
  
  <p>It works fine but my requirement is when click on minus button, the selected div will be removed, not the last one, as I'm creating the div <code>id</code> dynamically.</p>
  
  <p>Code for creating div <code>id</code>:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function addMore() {
          //  alert("adddiv");
          $("#preacq0").clone().attr('id', 'preacq0'+ cloneCount++).appendTo("#addMoreDiv");                          
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Remove button markup:</p>
  
  <pre><code>    &lt;div class="add_remove"&gt; 
          &lt;a&gt;
              &lt;img onclick="removeMI()" src= "&lt;%=Config.getStaticURL()%&gt;resources/img/remove-field.png" /&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>