我正在关注表单的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> 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=""> 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> <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> 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">
?
答案 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();
});
});