jQuery 如何删除父tr
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11756230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to delete a parent tr
提问by oshirowanen
UPDATE 1:
更新1：
I'm wondering if it has anything to do with the button being within the element which is being deleted, so it would end up deleting the button which does the deleting too? That might not be the problem, I was just typing that I'm thinking.
我想知道它是否与被删除的元素内的按钮有关，所以它最终会删除执行删除操作的按钮？那可能不是问题，我只是打字我在想。
I've just tried:
我刚试过：
$( "input.btnX" ).click(function(event) {
alert("test");
});
and I don't get an alert... Should I be using liveor is it onnow because the buttons along with the table are dynamically generated.
而且我没有收到警报...我应该使用live还是on现在使用，因为按钮和表格是动态生成的。
ORIGINAL QUESTION:
原问题：
I have a table (dynamically generated, so I won't know how many tr's it has in tbody which looks something like this:
我有一个表（动态生成的，所以我不知道它在 tbody 中有多少个 tr，它看起来像这样：
<table>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td><input type="button" class="btnX" name="x" value="x" /></td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td><input type="button" class="btnX" name="x" value="x" /></td>
</tr>
</tbody>
</table>
How do I delete the parent tr if an x button is clicked? So in this example, if the bottom x is clicked, it should remove the bottom tr.
如果单击 x 按钮，如何删除父 tr？所以在这个例子中，如果底部 x 被点击，它应该删除底部 tr。
I've tried this:
我试过这个：
$( "input.btnX" ).click(function(event) {
$(this).parent('tr').remove();
});
But nothing happens.
但什么也没有发生。
回答by Dominic Green
Just use
只需使用
$( "input.btnX" ).click(function(event) {
$(this).parent().parent().remove();
});
Or
或者
$( "input.btnX" ).click(function(event) {
$(this).closest("tr").remove();
});
As what you are doing is going to the parent which is the tr and then looking for a tr
因为你正在做的是去父母这是 tr 然后寻找一个 tr
See an example here http://jsfiddle.net/gYDUF/
在此处查看示例http://jsfiddle.net/gYDUF/
If your table is beeing rendered by javascript you may also have to change your click on
如果您的表格是由 javascript 渲染的，您可能还需要更改您的点击
$("input.btnX" ).live(click, function(){
$(this).closest("tr").remove();
});
回答by nbrooks
The jQuery .live()method has been deprecated, and delegated event handlers should now use .delegate()(for older versions) or .on().
jQuery.live()方法已被弃用，委托的事件处理程序现在应该使用.delegate()（对于旧版本）或.on().
The syntax for using .on()for delegated events is:
.on()用于委托事件的语法是：
$(document).on('click','input.btnX', function() {
$(this).closest('tr').remove();
});
Note that documenthere can also be replaced by any static parent element (of the future buttons) that exists at the time the handler is bound.
请注意，document此处也可以替换为绑定处理程序时存在的任何静态父元素（未来按钮的）。
回答by tfeiner
回答by Lixus
Try this:
尝试这个：
$( "input.btnX" ).click(function(event) {
$(this).closest('tr').remove();
});
As the tr is not a direct parent to the input element.
由于 tr 不是输入元素的直接父元素。
EDIT: If the Table is built dynamically, try using
编辑：如果表是动态构建的，请尝试使用
$( "input.btnX" ).live("click", function(event) {
$(this).closest('tr').remove();
});
回答by neokio
Not sure if it's better, but I use parents()...
不确定它是否更好，但我使用parents()...
$('input.btnX').click(function() {
$(this).parents('tr').remove();
});
回答by Dean Jasper
First thanks everyone, I want to share and give back from the error I was able to solve from this thread, my own version of solution:
首先感谢大家，我想分享并回馈我能够从这个线程解决的错误，我自己的解决方案版本：
Solution Step 1: In my setup using "closest" instead of parent/parents(also deletes parent so not for me) worked for me:
解决方案第 1 步：在我的设置中，使用“closest”而不是 parent/parents（也删除了 parent，所以不适合我）为我工作：
$("#container1").on('click','#remove',function(e) {
$(this).closest("tr").remove();
});
Solution step 2: Since it is 'tr', placed your the javascript reference id [i.e. #container1], on the 'table' instead on 'tr' otherwise there will be a design error
解决方法步骤 2：由于它是 'tr'，因此将您的 javascript 引用 ID [即 #container1] 放在 'table' 上而不是放在 'tr' 上，否则会出现设计错误
<table id="container1">
Solution step 3: Don't forget to activiate jquery in your page:
解决方法步骤 3：不要忘记在页面中激活 jquery：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
回答by Tomer
First of all change the id="btnX"to class="btnX", since id should be unique.
首先更改id="btnX"为class="btnX"，因为 id 应该是唯一的。
then you can do this:
那么你可以这样做：
$( "input.btnX" ).live(function(event) {
$(this).closest('tr').remove();
});
回答by Chris
$("input.btnX").live("click", function(event) {
$(this).closest('tr').remove();
});?
This fixes your problem, see this jsFiddlewhich shows it working.
这解决了您的问题，请参阅此 jsFiddle，它显示了它的工作原理。
Here is an updatethat shows it working with dynamic tables
这是一个更新，显示它与动态表一起工作
