Menu
My code is attached below.
$('#aprod').on('click', function() {
$('#ln1').clone().appendTo('#page3_inside');
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});
$('body').on('click', '.del', function() {
$(this).closest('tr').remove();
});<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title></title>
</head>
<body>
<form>
<input type='button' value='Add Another Product' id='aprod' />
</form>
<table id='page3_inside'>
<tr id='ln1'>
<td>
<label for="product_name">Product Name</label>
<br />
<select class='input name_of_product' style='width:150px; height:34px;' name="name_of_product[]">
<option value="">Select from List</option>
</select>
</td>
<td>
<label for="product_cat">Product Category</label>
<br />
<input type='text' class="input product_category" name="product_category[]"
style="font-family:verdana; width:150px; border: 1px solid #000000;" readonly="readonly" />
</td>
<td>
<label for="qty">Qty</label>
<br />
<input type="text" value="" class="input qty" style="width:100px;" name="qty[]" placeholder="Qty"
onkeypress="return isNumberKey(event)" />
</td>
<td>
<label for="unit">Unit</label>
<br />
<input type='text' class="input unit" style="width:100px;" name="unit[]" readonly="readonly" />
</td>
<td>
<label for="brand">PO Number</label>
<br />
<input type="text" value="" class="input po" name="po[]" placeholder="PO Number"
style='width:150px; height:28px;' />
</td>
<td>
<img src='http://www.oasisservicedoffices.co.uk/wp-content/uploads/2014/08/Delete-button-150x150.jpg'
class='del' width='30px' style='cursor:hand;cursor:pointer;' />
</td>
</tr>
</table>
</body>
</html>$('body').on('click', '.del', function() {
$(this).closest('tr').remove();
});
I created a delete button for appended elements. but as you can see, there is a delete button on the first row. what i want to do is remove that delete button, and only display it on the next row upon pressing the 'Add Another Product' button.
$('#aprod').on('click', function() {
$('#ln1').clone().appendTo('#page3_inside');
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});
469
You could just hide the first delete button with css
table tr:first-child .del{
display: none;
}
DEMO
129
If you want delete button to the last element only:
$('#aprod').on('click', function() {
var el = $('#page3_inside tr:last').clone()
$('#page3_inside').find('.del').remove();
el.appendTo('#page3_inside');
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});
$('body').on('click', '.del', function() {
$(this).closest('tr').remove();
});
Demo: http://jsfiddle.net/tusharj/f772sovm/8/
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
