如何删除动态父级 通过子的OnClick

Question

我通过 Javascript var 添加 ：

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() 函数可以删除父标签，而不会意外删除所有 标签？

Answer 1

考虑到这个是删除按钮：

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

以下内容即可：

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

我建议您使用 jQuery 事件处理程序，而不是使用内联 onclick 等。 $(this) 是被单击按钮的 jQuery 对象，.closest() 将在按钮的父级中查找并找到第一个 tr< /code>，然后将其删除。

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());
}

参见 fiddle： http://jsfiddle.net/garreh/6NUK3/1/