如何通过子 <input> 的 OnClick 删除动态父 <tr>

Question

我正在通过 Javascript 变量添加 <tr>：

var txtBox = "<tr id='dynTR'><td><input type='text' class='textBoxes' /></td><td><input type='text' class='textBoxes' value='0' /></td><td><input type='button' value='-' /></td></tr>";

我的功能是：

function AddTR(table) {
            $(table).append(txtBox);
        }

我在 HTML 中的表格结构（连同函数的按钮）是：

<table id="tblTest" class="testTable">
            <thead>
                <tr>
                    <td>Product</td>
                    <td>Quantity</td>
                    <td>Remove TR</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <br />
        <input type="Button" id="btnTest" value="Add Table Row" onclick="AddTR($('#tblTest'))" />

那么我该如何在 jQuery 中使用 .remove() 函数来摆脱父标签而不意外删除所有 <tr id='dynTR'> 标签？

Answer 1

考虑到这个是删除按钮：

<input type='button' value='-' />

以下会做：

$('#tblTest input[type="button"]').click(function () {
     $(this).closest('tr').remove();
});

我建议您使用 jQuery 事件处理程序，而不是使用内联 onclick 和朋友。 $(this) 是被点击按钮的 jQuery 对象，.closest() 会在按钮的父项中查找第一个tr，然后将其删除。

jsFiddle by @ShadowWizard

最好的方法是更改​​删除按钮的 HTML：

<input type='button' value='-' class='removeButton' />

所以你可以像这样定位你的删除按钮：

$('#tblTest .removeButton').click(...

这更好，因为在前面的示例中，表中每个可能的input type="button" 都会收到事件，即使我们只需要在这些特殊的事件上使用它（如果表中没有其他按钮，这不是问题）。

Answer 2

bazmegakapa 答案应该可以解决问题。此外，您应该真正避免使用内联 Javascript，这通常是不好的做法。而是这样做：

$('#btnTest').click(function() { AddTR($('#tblTest')); });

为了跟上 jQuery 的惯例，使用元素对象的正确范围，你可以这样做：

$('#btnTest').click(function() { AddTR.call($('#tblTest')[0]); });

然后在您的 AddTR 函数中，您可以简单地将元素表引用为 this

function AddTR() {
    $(this).append(txtBox);
}

它使事情保持可预测性并遵循相同的约定。

---

等一下……

理论上虽然AddTR() 函数正在添加一个表格行，但它有点误导，因为它所做的只是将一个元素附加到该上下文中。你真正想做的就是函数所说的； 添加一个表格行！而不是你做的

var txtBox = "<tr id='dynTR'><td><input type='text' class='textBoxes' /></td><td><input type='text' class='textBoxes' value='0' /></td><td><input type='button' value='-' /></td></tr>";

这是相当丑陋的，如果你改变你的表格行结构会导致一些变化。相反，请使用.clone 来帮助您：

function AddTR() {
   $(this).append($('tr:last').clone());
}

见小提琴： http://jsfiddle.net/garreh/6NUK3/1/