为什么在以下场景中不会删除div标签及其内容?

时间:2014-05-08 02:09:25

标签: javascript jquery html

我正在关注表单的HTML:

 <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>

我想删除带有“rbt”类的<div>标记及其内容<div class="rbt">...</div>。由于页面本质上是动态的,因此表单上可能存在许多<div class="rbt">个标记。当用户添加新块时,新的<div class="rbt">...</div>将会附加。我已经采用了一个图标来仅删除删除图标所在的特定位置。它的HTML如下:

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

你也可以在abolve代码中看到这个lione。 我试过的jQuery如下,但它对我不起作用。

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

那么在点击其中的图标后如何删除相关的<div class="rbt">

2 个答案:

答案 0 :(得分:0)

最接近的是父母或祖父母或祖父母等等,

THUS:

$(function () {
  $(document).delegate('.del_reb','click',function () {
    $(this).parents('.rbt').remove();    
  });
});

答案 1 :(得分:0)

由于.del_reb并非您的脚本加载时必须使用on。我通常将代码包装在$(document).ready()

$(document).ready(function () {
    $(document).on('click','.del_reb',function () {
        $(this).closest('.reb').remove();    
    });
});