0

I've following HTML of a form:

 <form action="add_rebate_by_product.php" role="form" method="post">
              <div class="row">
                <input type="hidden" class="form-control" name="op" id="op" value="preview">
                <input type="hidden" class="form-control" name="id" id="id" value="">
                <input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
                <div class="col-xs-2">
                </div>

                <div style="float: clear;"></div>
                <div style="margin-left: 12px" class="col-xs-4">
                  <div class="form-group">
                    <label for="company_name" class="col-lg-4">Manufacturer<span style="color:#FF0000">*</span></label>
                    <div class="col-lg-7">
                      <select id="company_id" name="company_id" class="form-control" onchange="GetAllProductByManufacturerID(this.value)">
                        <option value=""  selected='selected'>Select Manufacturer</option>

                        <option value="33" >Eywa Solutions</option>

                        <option value="37" >Amazon</option>

                        <option value="40" >Test</option>

                        <option value="42" >RK</option>

                        <option value="46" >Santa Margherita</option>
                                              </select>
                    </div>
                  </div>
                </div>
                <div style="margin-left: -61px" class="col-xs-4">
                  <div class="form-group">
                    <div class="col-lg-7">                      
                      <button style="float:right" class="add_new_rebate" type="button" class="btn btn-default" onclick="add_rebate_by_product(); return false;"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
                    </div>
                  </div>
                </div>
              </div>
              </br> 
              <div class="col-lg-2"></div>                  
              <div class="col-md-8 rebate_block">

                <div class="rbt"><!-- Start of div with class reb -->
                  <div style="overflow:auto" class="well">                 
                    </br>
                    <div class="table-responsive">
                      <table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
                        <thead>
                          <tr>
                            <th style="vertical-align:middle">Products</th>
                            <th style="vertical-align:middle">Pack Of</th>
                            <th style="vertical-align:middle">Quantity</th>
                            <th style="vertical-align:middle">Volume</th>
                            <th style="vertical-align:middle">Unit</th>
                            <th style="vertical-align:middle">Rebate Amount</th>
                          </tr>
                        </thead>
                        <tbody class="apnd-test">
                          <tr id="reb1_1">
                            <td>
                              <div class="btn-group">
                                <select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
                                  <option value=""  selected='selected'>Select Product</option>
                                                                  </select>
                              </div>
                            </td>
                            <td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
                            <td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
                            <td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
                            <td>
                              <div class="btn-group">
                                <select name="units[1]" id="units_1" class="form-control">
                                  <option value=""  selected='selected'>Select Unit</option>

                                  <option value="5" >Microsecond</option>

                                  <option value="7" >oz</option>

                                  <option value="9" >ml</option>

                                  <option value="10" >L</option>

                                  <option value="12" >gms</option>
                                                                  </select>
                              </div>
                            </td>
                            <td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
                          </tr>
                        </tbody>
                        <tfoot>
                          <tr id="reb1_2">
                            <td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                          </tr>
                        </tfoot>                                           
                      </table>                  
                    </div>
                  </div> <!-- /span8 -->              
                  <div class="row">
                    <div class="col-xs-6">
                      <label for="name" class="col-lg-5">Rebate Start Date<span style="color:#FF0000">*</span></label>
                      <div class="col-lg-6">
                        <input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date[1]" id="rebate_start_date_1" value="">
                      </div>
                    </div>
                    <div class="col-xs-6">
                      <label for="name" class="col-lg-6">Rebate Expiry Date<span style="color:#FF0000">*</span></label>
                      <div class="col-lg-6">
                        <input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date[1]" id="rebate_expiry_date_1" value="">
                      </div>
                    </div> 
                  </div>
                  </br>
                  <div class="row">
                    <div class="col-xs-6">
                      <label for="name" class="col-lg-5">Applicable States</label>
                      <div class="col-lg-7">
                        <select class="states" multiple="multiple" name="applicable_states[1][]" id="applicable_states_1">
                                                                            <option value="1">Alabama</option>
                                                    <option value="2">Alaska</option>
                                                    <option value="3">Arizona</option>
                                                    <option value="4">Arkansas</option>
                                                    <option value="5">California</option>


                        </select>                          
                      </div>
                    </div>
                    <div class="col-xs-6">
                      <label for="name" class="col-lg-6">Rebate Total Count</label>
                      <div class="col-lg-6">
                        <input type="text" class="form-control" name="rebate_total_count[1]" id="rebate_total_count_1" value="">
                      </div>
                    </div> 
                  </div>
                  <div class="row">
                    <div class="col-xs-5"></div>
                    <div align="right">
                      <a href="#"><i class="icon-pencil"></i></a>&nbsp;&nbsp;&nbsp;<a href="#" class="del_reb"><i class="icon-trash"></i></a>
                    </div>                
                  </div>                      
                  <div class="row">
                    <div  class="col-xs-6"></div>
                    <div style="margin-left: -9px"  class="col-xs-4 load_img">                                          
                    </div>
                  </div>
                </div><!-- End of div with class reb -->
                              </div>
              </br>
              <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6">
                  <label for="name" class="col-lg-6"></label>
                  <div class="col-lg-6">
                    <button style="float:right" class="add_new_rebate" type="button" class="btn btn-default" onclick="add_rebate_by_product(); return false;"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
                  </div>
                </div> 
              </div>
              <div class="row">
                <div  class="col-xs-5"></div>
                <div style="margin-left: -9px"  class="col-xs-5">
                  <button type="submit" class="btn btn-primary">Preview</button>
                  <button type="button" class="btn btn-default">Go Back</button>                        
                </div>
              </div>              
            </form>

I want to delete the <div> tag with class "rbt" and contents of it <div class="rbt">...</div>. As the page is dynamic in nature there can be many <div class="rbt"> tags present on the form. As user adds new blocks the new <div class="rbt">...</div> will append. I've taken an icon to delete only the specific in which the delete icon is present. The HTML for it is as follows:

<a href="#" class="del_reb">

You can see this lione in abolve code too. The jQuery I tried is as follows, but it didn't work for me.

$(function () {
  $('.del_reb').click(function () {
    $(this).closest('.rbt').remove();    
  });
});

SO how to delete the concerned <div class="rbt"> after clicking on the icon present in it?

Abdennour TOUMI
  • 64,884
  • 28
  • 201
  • 207
PHPLover
  • 7,021
  • 32
  • 90
  • 182

2 Answers2

0

The closest is the parent or grand-parent or grand grand-parent and so on,

THUS : 

$(function () {
  $(document).delegate('.del_reb','click',function () {
    $(this).parents('.rbt').remove();    
  });
});
Abdennour TOUMI
  • 64,884
  • 28
  • 201
  • 207
  • Why are you using `.delegate` and why are you using `.parents`? – Felix Kling May 08 '14 at 02:20
  • .delegate: Because the element(a.del_reb) does not exist when the page loaded . parents : Because ,"div.rbt" is one of parents of a.del_reb according to the HTML in question(more performed than closest) – Abdennour TOUMI May 08 '14 at 02:22
  • `.delegate` is deprecated in favor of `.on`. `.closest` is better than `.parents` in this case *and* the OP is already using it. *edit:* Wait, what, why do you think `.parents` is more performant? `.closest` stops at the first element that matches the selector, `.parents` traverses all the way up to the root and collects all elements that match the selector. – Felix Kling May 08 '14 at 02:25
  • @AbdennourToumi:Your code is working for me but the page is getting reloaded. Due to which what happens is if I add three
    fill up data in all three div's input fields and click on any of the div's delete icon, then the page reloads and only one
    is shown as of initial page load. How to resolve this issue?
     – PHPLover May 08 '14 at 03:55
0

as .del_reb was not when your scipt was loaded you have to use on. I usually wrap my code in $(document).ready()

$(document).ready(function () {
    $(document).on('click','.del_reb',function () {
        $(this).closest('.reb').remove();    
    });
});
bto.rdz
  • 6,322
  • 4
  • 32
  • 49