Question

我通过javascript var：

添加<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/

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

2 个答案:

等一下......