我有一个HTML表,其中可以通过按钮单击动态添加行(也使用jQuery完成)。我现在想要的是,我需要在每一行的旁边放一个按钮。按它将删除该特定行。
表格如下。
<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>
添加更多行的Jquery如下。
$("#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> ');
我正在使用的功能就是这个。但它不起作用。
$(".delete").on('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
那我该怎么做?
答案 0 :(得分:2)
由于行是动态的,您需要一个委托的事件处理程序,附加到元素的不变的祖先。如果没有更接近/方便的话,document
是最好的默认值:
$(document).on('click', ".delete", function(){
$(this).closest('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
在您的示例中,table
元素将是一个很好的目标。
e.g。
$('#items').on('click', ".delete", function(){
$(this).closest('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
委派事件通过在事件时应用jQuery选择器而不是在事件已注册时起作用。这意味着它们可以在以后存在。
答案 1 :(得分:1)
首先,将表标签放在add上,然后尝试:
$('table').on('click', ".delete", function() {
$(this).closest('tr').remove(); // more simple
});
答案 2 :(得分:0)
<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>