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

Question

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

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'))" />

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

Answer 1

考虑到这个是删除按钮:

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

将执行以下操作:

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

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

jsFiddle by @ShadowWizard

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

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

因此您可以像这样定位您的删除按钮:

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

这样更好，因为在前面的示例中，表中每个可能的 input type="button" 都会获得事件，即使我们只需要在这些特殊事件上使用它(如果表格中没有其他按钮)。