使用jQuery删除动态添加的行可以通过以下步骤实现:
下面是一个示例代码:
HTML部分:
<table id="myTable">
<tr>
<td>行1</td>
<td><button class="deleteBtn">删除</button></td>
</tr>
</table>
<button id="addBtn">添加行</button>
JavaScript部分:
// 添加行
$('#addBtn').click(function() {
var newRow = '<tr><td>新行</td><td><button class="deleteBtn">删除</button></td></tr>';
$('#myTable').append(newRow);
});
// 删除行
$('#myTable').on('click', '.deleteBtn', function() {
$(this).closest('tr').remove();
});
在上面的示例中,点击"添加行"按钮会在表格末尾添加一行,每一行都有一个"删除"按钮。点击"删除"按钮时,会找到其所在的行并将其移除。
这种方法可以适用于动态添加的行,无论是通过用户交互还是通过其他方式添加的行,都可以通过事件委托来监听并删除。这样可以确保在删除行时不需要为每一行都绑定删除事件,提高了效率。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
云+社区技术沙龙[第25期]
云+社区技术沙龙[第28期]
企业创新在线学堂
云+社区技术沙龙[第14期]
停课不停学第四期
北极星训练营
DBTalk
“中小企业”在线学堂
领取专属 10元无门槛券
手把手带您无忧上云