Here's the issue at hand: I currently have "+" and "-" icons at the end of each row to add and delete rows as needed.
However, I would like to replace the "-" icon with a trashcan symbol instead. I attempted to do this by replacing it with an image source, but this caused alignment issues.
If we remove the box from the "+" sign and only keep the "+" for adding rows, while using a trashcan icon for deletion ("-"), that would be ideal. Can anyone assist me in achieving this? See code below.
<tr>
<td align="left">
<g:select name="standard[]" id="standard" class="statSele valid" from="${standardList}" value="" noSelection="['':'Select Regulatory Standard...']"/>
<g:select name="standard_version[]" id="standard_version" class="statSele valid" from="${standardversion}" value="" noSelection="['':'Select Version...']" style="width:150px !important;"/>
<g:select name="standard_domainnumbers[]" id="standard_domainnumbers" req="false" class="statSeledomain valid" from="${['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50']}" value="" noSelection="['':'Select Domain...']"/>
<INPUT type="checkbox" name="chk" class="delCheck"/>
<input type="button" value=" + " title="Add More" class="clone-faculty"/>
<input type="button" value=" - " title="Remove selected Row" class="remove-faculty"/>
</td>
</tr>
<script>
$('.clone-faculty').click(function() {
var clone = $('.add-child:first').clone(true).appendTo('#itemRows');
});
$(".remove-faculty").click(function(e) {
if($('.add-child').length > 1)
{
if($(".delCheck:checked").length != $('.add-child').length)
{
$(".delCheck:checked").closest("table").remove();
// $(".add-child").last().remove();
}
else
{
alert('You cannot delete all rows.');
}
}
});
</script>