Delete HTML table rows with jQuery
Question
I have an HTML table in which rows can be added dynamically by button click(Also done with jQuery). What I want now is,I need to have a button by the side of each row. Pressing it would delete that particular row.
The table is as follows.
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><textarea></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td><input type="text" class="slno"/></td>
<td><input type="text" class="cost"/></td>
<td><input type="text" class="qty"/></td>
<td><span class="price"></span></td>
</tr>
The Jquery to add more rows is as follows.
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><input type="text" class="slno"/><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><input type="text" class="slno"/></td><td><input type="text" class="cost"/></td><td><input type="text" class="qty"/></td><td><span class="price"></span></td></tr> ');
The function I am using is this. But it's not working.
$(".delete").on('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
So how do I do this?
3 answers
solution1
2 ACCPTED 2016-01-19 15:51:37
As the rows are dynamic you need a delegated event handler, attached to a non-changing ancestor of the elements. document is the best default if nothing is closer/convenient:
$(document).on('click', ".delete", function(){
$(this).closest('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
In your example the table element would be a good target.
eg
$('#items').on('click', ".delete", function(){
$(this).closest('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
Delegated events work by applying the jQuery selector at event time, not when the event was registered. This means they can exist later.
solution2
1 2016-01-19 15:57:11
First, put the table label on the add, then try this :
$('table').on('click', ".delete", function() {
$(this).closest('tr').remove(); // more simple
});
solution3
0 2016-01-19 16:12:46
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#btadd').click(function () {
szTr='<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><input type="text" class="slno"/></td><td><input type="text" class="cost"/></td><td><input type="text" class="qty"/></td><td><span class="price"></span></td></tr>';
$('#tbl_test tbody').append(szTr)
});
$('table').on('click', ".delete", function () {
$(this).closest('tr.item-row').remove();
});
});
</script>
</head>
<body>
<button value="Add Row" id="btadd">Add Row</button>
<table id="tbl_test">
<tbody>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><textarea></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td><input type="text" class="slno"/></td>
<td><input type="text" class="cost"/></td>
<td><input type="text" class="qty"/></td>
<td><span class="price"></span></td>
</tr>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><textarea></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td><input type="text" class="slno"/></td>
<td><input type="text" class="cost"/></td>
<td><input type="text" class="qty"/></td>
<td><span class="price"></span></td>
</tr>
</tbody>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.