如何通过onClick of child <input>删除动态Parent <tr>

Question

我正在添加<tr>一个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'))" />

那么如何.remove()在jquery中使用函数去除父标记而不会意外删除所有<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"表中的每个可能都会得到事件,即使我们只需要在这些特殊的事件上(如果表中没有其他按钮则不会出现问题).