Sunday, January 11, 2015

How to Remove Row in Table using jQuery


Introduction:
Here I will explain in how to remove row in table using jQuery or jQuery remove current selected row from table or how to delete table row using jQuery.

The below is  jQuery function to remove the Table Row
<script type="text/javascript">
$(function() {
$('input[type="button"]').click(function(e) {
var row = $(this).closest('tr');
row.remove()
})
})
</script>



 The Below is complete Code with the aboive function.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Remove Previous table tr</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$('input[type="button"]').click(function(e) {
var row = $(this).closest('tr');
row.remove()
})
})
</script>
</head>
<body>
<form id="form1">
<div>
<table broder="1">
<tr>
<td><input type="button" value="Delete Row1"/></td>
</tr>
<tr>
<td><input type="button" value="Delete Row2" /></td>
</tr>
<tr>
<td><input type="button" value="Delete Row3"/></td>
</tr>
</table>
</div>
</form>
</body>
</html>

No comments:

Post a Comment