javascript - Delete all elements with same class attribute but leaving one -

javascript - Delete all elements with same class attribute but leaving one -

i can delete text boxes class called trskillcls jquery remove function. thing trying accomplish if there 5 text boxes same classname don't want remove of them 4 should remove i.e 1 element less. have write function remove text fields leaving 1 text field remain on save button click. here' s code:

$("#addanotherskillbtn").click(function(){ addanotherskill(); }); function addanotherskill(){ var trskillhtml = $("<div />").append($("#trskill").clone()).html(); $("#tbskill").append(trskillhtml); } function removeskill(self){ var delbtnctr = $('#tbskill').find('.deleteskillcls').length; if(delbtnctr > 1) $(self).closest('tr').remove(); }

and html:

<table width="100%" border="0" cellspacing="1" cellpadding="3"> <tr> <td ><strong>employee</strong></td> <td width="2%">:</td> <td width="82%"><input name="empname" id="empname" type="text" style="width:100%;height:30" maxlength="30" ></td> </tr> <tr> <table class="skilltable" border="0" cellpadding="0" cellspacing="0" width="480"> <tbody id="tbskill"> <tr id="trtitle"> <td width="206"><strong>skill</strong></td> <td width="270"><strong>level</strong></td> <td></td> </tr> <tr id="trskill" class="trskillcls"> <td><input name="skill" id="skillp0" style="height:30;width:190;" maxlength="60" autocomplete="off" tooltip="please come in 1 skill per box." type="text"></td> <td > <select name="ddlskilllevel" class="w180"> <option value="-1">level</option> <option value="00" selected="selected">beginner</option> <option value="01">intermediate</option> <option value="02" >expert</option> <!-- <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> <option value="10">10</option> <option value="11">11</option> --> </select> </td> <td> <input type="button" class="deleteskillcls" name='parentdel' onclick="removeskill(this)" value="delete"> </td> </tr> </tbody> </table> </tr> <tr> <td></td> </tr> <tr> <td> <input type="hidden" id="str" name="str" value="" /> <input type="button" name="addanotherskill" id='addanotherskillbtn' value="add skill"> <input type="submit" name="submit" id="btnsave" value="save"> <input type="reset" name="reset" value="reset"></td> </tr> </table>

you can remove first using below jquery ( assuming there no specific criteria of 1 maintain ):

$('.trskillcls').not(':first').remove();

demo

javascript jquery html html5 dom