I've following HTML mark-up of a <table>
<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>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
<option value="10" >Coffee</option>
<option value="11" >Tea</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 colspan="5"></td>
</tr>
</tfoot>
</table>
I'm appending the control on click of Add button. It's working fine. I'm also attaching the Delete icon to the newly added but it's not getting assigned/displyed. Also when user clicks on any delete icon concerned <select> shoud get delete. I've written following code but it's not working.
$(function () {
$(document).delegate('.products', 'click', function (e) {
var table_id = $(this).closest('table').attr('id');
var no = table_id.match(/\d+/)[0];
var first_row = $('#' + table_id).find('tbody tr:first').attr('id');
var toBeCloned = $('#' + first_row).find('td:first').find('select:last');
var new_row = toBeCloned.clone();
var idCounter = toBeCloned.attr('id').split('_');
var new_id = 'product_id_' + no + '_' + (parseInt(idCounter[3]) + 1);
var new_name = 'product_id_' + no + '[' + (parseInt(idCounter[3]) + 1 + ']');
var elementToAppendTo = $('#' + table_id).find('tbody tr:first .btn-group:first');
$(new_row).appendTo(elementToAppendTo).attr('id', new_id);
$(new_row).appendTo(elementToAppendTo).attr('name', new_name);
$('<button id="' + sel_id + '" style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">×</button>').appendTo(elementToAppendTo);
//function to delete HTML select element from add rebate by product grid
//$('.delete').on('click', deleteRow);
$('.delete').on('click', function () {
var prd_id = $(this).attr("id");
$(this).remove();
$("#" + prd_id).remove();
});
});
});
Can some one please help me in this regard? For your reference here is jsFiddle link I've created with above HTML and jQuery code:
Problem is you have used button id=sel_id and sel_id is not defined anywhere.
You need to used id=new_id like below
$('<button id="'+new_id
+'"style="color:#C00; opacity: 2;margin-top: 6px;"'
+' type="button" class="close delete" data-dismiss="alert"'
+' aria-hidden="true">×</button>')
.appendTo($(elementToAppendTo));
please see JSFiddle