Javascript 如何删除动态父项<；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>";

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

产品
量
移除TR

---

那么，我如何使用jQuery中的

.remove（）

函数除去父标记，而不意外地除去所有

标记呢？

考虑到这是一个删除按钮：

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

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

我建议您使用jQuery事件处理程序，而不是使用内联

onclick

和friends

$（此）

是所单击按钮的jQuery对象，

.closest（）

将在按钮的父级中查找第一个

tr

，然后将其删除

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

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

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

---

这是更好的，因为在前面的示例中，表中每个可能的

input type=“button”

都会得到事件，即使我们只需要在这些特殊的按钮上使用它（如果表中没有其他按钮，则这不是问题）。

答案应该就可以了。此外，您还应该避免使用内联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>";

---

参见fiddle:

Nice，打算使用

parent（“td”）提供解决方案。parent（“tr”）

您的方式显然更好。我也做了一个快速的测试用例：：）@Shadow谢谢，让我把它放在我的答案里。我明白了，那我就试试吧。谢谢：）干杯@baz很高兴我也能提供一些帮助。：）令人惊叹的！成功了！我想我在第一次尝试应用你的解决方案时错过了一些东西，但在第二次尝试后，我得到了它。我想我错过了一些课堂/id参考。+1个好建议。jQuery提供了一种附加事件处理程序的非常简单的方法。内联事件处理程序只会给您带来更多的问题（行为不应该包含在HTML标记中）。我在前端编程方面没有太多尝试，但阅读您的评论可以让我更好地理解前端开发。没问题，Erick。您希望了解更多关于前端和jQuery的信息，这是一件好事，这是您的梦想。我知道你已经接受了baz的答案，但无论如何，我已经更新了我的答案，为你的尝试提供了一个更优化的方法。太棒了。不过，我认为应该有一个条件，即如果与最后一行不匹配，则不应该克隆，而是创建该行。无论如何，这只是我的问题，因为用户可以单击“删除”按钮并最终克隆标题。通过一些结构更改，通过正确地将标题添加到

的

部分中，以及

中的表体，您可以非常轻松地使用

：not（：first child）完成此操作

selector——请参见此处：——我添加了重置输入值的功能，使其在新添加的行上为空。

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() {
   $(this).append($('tr:last').clone());
}