使用jQuery从表中删除<tr>
使用jQuery从表中删除<tr>
提问于 2019-06-06 15:55:06
我有两个表，每一行都有自己的删除按钮：
<table class="table" id="Offers">
<tr id="row1">
<td><button type="button" id=1 class="removeOffer">X</button</td>
</tr>
</table>
<table class="table" id="OffersHistory">
<tr class="History1">
<td><button type="button" id=1 class="removeOfferHistory">X</button</td>
</tr>
</table>和两个简单的JQuery代码，用于每个表，用于删除：
$(document).on('click', '.removeOffer', function(){
var button_id = $(this).attr("id");
$('#row'+button_id).remove();
});
$(document).on('click', '.removeOfferHistory', function(){
var button_id = $(this).attr("id");
$('.History'+button_id).remove();
});当我点击第一个表格中的"X“按钮时，它工作得很好。已删除第一个表中的行...但是当我点击第二个表格中的"X“按钮时，它会同时删除第二个和第一个表格中的行。删除两个表中具有相同编号的相同行。为什么？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-06-06 16:04:28
首先，包含多个具有相同id的元素是无效的。
但是，您可以通过使用jQuery的强大功能来极大地简化代码……
$(function(){
$("button").on("click", function(e) {
e.preventDefault();
$(this).closest("tr").remove();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>First Row</td>
<td><button>X</button></td>
</tr>
<tr>
<td>Second Row</td>
<td><button>X</button></td>
</tr>
</table>
Stack Overflow用户
发布于 2019-06-06 16:05:43
两个按钮的ID都为1，请更改ID或调用按钮内的javascript函数
Stack Overflow用户
发布于 2019-06-06 16:12:13
不确定你是否需要做这么多的编码。
您可以简单地通过以下方式完成：
$(document).ready(function() {
$('button').click(function() {
$(this).remove();
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Remove button</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button class="first" value="button1">button1</button>
<button class="first" value="button1">button2</button>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56481174
复制
相似问题
在亚马逊网络服务S3上批量移动文件
亚马逊网络服务S3中是否存在乐观锁定？
亚马逊亚马逊网络服务S3
批量加载亚马逊网络服务S3到Postgres流标准
是否可以压缩已存在于亚马逊网络服务S3中的文件？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
