Javascript 使用jQuery删除表中的行

我在一个表单中有一个表，表中的行数是动态的，可以通过单击按钮添加一个新的“虚拟”行来添加这些行。我在每一行的末尾放了一个按钮，该按钮应该删除相应的行，但我无法让delete按钮执行任何操作。 这是带有按钮的enitre行：

<tr id="dummyRow" class="hidden-print" style="display:none">
    <td></td>
    <td></td>
    <td><input id="Qty" name="Qty" value="" class="qtyField" type="number" min="0" pattern="[0-9]*" maxlength="6" size="3"></td>
    <td><input id="Price" name="Price" class="PriceField" type="text" maxlength="8" value=""></td>
    <td><input id="Desc" name="Desc" class="hidden" value=""></td>
    <td class="totalCol" taxable="true"></td>           
    <td><button type="button"class="btn btn-xs btn-warning" name="deleteRow"id="deleteRow">X</button></td> 
</tr>                       

该函数位于$（document）.ready（function（）{}）中，用于添加行的另一个按钮位于同一个函数中，工作正常。我对此进行了一整天的研究，并尝试了几种不同的方法，但当按钮位于“虚拟行”中时，这些方法都不起作用当它位于行外部时，它工作正常，只是不在行内部

---

有人知道我做错了什么吗？我不知道我是不是把按钮放错了位置，还是把函数放错了位置，或者上面的任何一项都没有。如果你将此行用于克隆目的，那么你必须将将来的事件绑定到该按钮上，并且你需要使用类而不是ID

要将事件绑定到所有DOM和未来的DOM，您应该使用JS包装的

.on（）

---

尝试在行

id

中添加一个唯一的值来标识

$('#myTableRow').remove();

如果您的行具有

id

，例如：

<tr id="myTableRow"><td>blah</td></tr>

废话

由于某些原因，这不适用于您的表代码，但是请在此表中检查此代码

---

由于它是隐藏的，您可以尝试在屏幕上显示一次并删除它吗

$（函数（）{
$（“#删除行”）。单击（函数（）{
var tr=$（this.nexist（'tr'）；
tr.remove（）；
totalQuote（）；
返回false；
});
})；

X

ID对于一个页面来说应该是唯一的。如果您计划多次使用

伪

行，我建议在按钮上放置一个类，然后使用事件委派来处理

。删除行

以下是事件委派的一个简单示例：

（函数（）{
//活动代表团：
$（'#唯一表id'）。在（'click'，'button.delete row'，函数（）{
$（this）.closest（'tr'）.remove（）；
});
$（'button.add row'）。在（'click'，函数（）{
$（'unique table id'）.append（$（''+$（'unique table id tr'）.length+'Delete'）；
});
})（）；

表td{
边框：1px纯黑；
}
桌子{
边框：1px纯黑；
宽度：100px；
}

添加行

@Burimi完全正确。此功能运行良好

$("#quoteForm").on("click", ".deleteBtn", function(e) {
            $(this).parent().parent().remove();
        totalQuote();

     });

---

它还可以使用

.closest

而不是

.parent（）.parent（）

当按钮在

显示中时是否不可访问：无

？正如他所说，行数是动态的，可以通过单击某个按钮来添加，考虑到这一点，我认为这是

$（“#删除行”）

不起作用，最好按类名选择..+1效果很好！谢谢！我真诚的道歉布里米，我好久没上了。

<tr id="myTableRow"><td>blah</td></tr>

$('button.btn').on('click', function () {
    var a = $(this).parent().parent().remove();
    totalQuote();
    return false;
});

$("#quoteForm").on("click", ".deleteBtn", function(e) {
            $(this).parent().parent().remove();
        totalQuote();

     });