Anup Anup - 3 months ago 13
Javascript Question

Jquery - Delete Row with criteria as a Textbox Value

I have a table. First column is Textbox type number. And other columns are just plain text.

I want to delete the row which Textbox value matches with the value which i get in a variable.

For e.g. If i have a value say 6 in a variable, I want to delete the row which has Textbox value as 6.

How to find the row with Textbox type as number & with a predefined value say 6 & then delete that row from table.

I tried :-

$('#tblField tr').eq(6).remove();


My Table :-

<table class="table table-bordered" id="tblFields">
<tboby>
<tr><td><input type="number" value="20" class="form-control"

onkeypress="javascript:return isNumber (event)"></td>
<td>ANNUAL PF</td>
<td><input type="text" value="ANNUAL PF" class="displayname form-control"></td><td><input type="checkbox" checked=""></td>
<td style="display:none">ANPF</td>
<td style="display:none">1</td>
</tr>
.....
.....
</tbody>
</table>


Please Help.

Answer

Please check this fiddle out - https://jsfiddle.net/nfvamrdx/

Html:

<table>
<tr>
  <td>
    <input type ="number" class="txtId" value="3"/>
  </td>
  <td>
    <input type ="text" />
  </td>
  <td>
    <input type ="text" />
  </td>
</tr>
<tr>
  <td>
    <input type ="number" class="txtId" value="6"/>
  </td>
  <td>
    <input type ="text" />
  </td>
  <td>
    <input type ="text" />
  </td>
</tr>
<tr>
  <td>
    <input type ="number" class="txtId" value="7"/>
  </td>
  <td>
    <input type ="text" />
  </td>
  <td>
    <input type ="text" />
  </td>
</tr>
</table>

Javascript:

$(document).ready(function(){

$('#btnRemove').click(function(){

var valueToBeRemoved = $('#txtIdToRemove').val();
    $('.txtId[value='+valueToBeRemoved+']').parents('tr').remove();
});
});

$('#tblField tr input[type="number"][value=' + valueToBeRemoved + ']').parents('tr').remove();
Comments