JavaScript删除动态创建的tr

我有一个js函数，它将

tr

添加到

表中

：

function AddData() {

    var rows = "";

    var product_id = $('input[name="product_name"]').val();

    var product_price = $('input[name="product_price"]').val();

    rows += "<td><input type='hidden' name='item_id[]' value='" + product_id + "'><p>" + name + "</p></td><td><input type='hidden' name='price[]' value='" + product_price + "' class='price'></td><td>&pound;<span id='amount' class='amount'>0</span></td><td><div class='btn btn-circle' onclick='RemoveData()' value='" + curtainid + "'>Delete</div></td>";
    var tbody = document.querySelector("#myTable tbody");
    var tr = document.createElement("tr");

    tr.innerHTML = rows;
    tbody.appendChild(tr)

    update_amounts();    
}

---

但是没有成功。

getElementById

通过其

id

获取单个元素。您正在传入一个标记名，并希望它返回一个列表

如果您的目标是删除页面上任意位置的最后一个

tr

元素，则可以使用

querySelectorAll

：

function RemoveData() {

    var elements = document.querySelectorAll('tr'); // <== Main change
    var last = elements[elements.length-1];         // <== Note I added `var`
    last.parentNode.removeChild(last);
}

。删除{
光标：指针；
}

---

我更喜欢jQuery函数

.closest（）


$（文档）.ready（函数（）{
$（'button[name=deleteTR]'）。单击（函数（）{
$（this）.closest（'tr'）.remove（）；
});
});

删除第1行
删除第2行
删除第3行
删除第4行
谢谢TJ，这样可以很好地删除最后一个元素。如何删除选定的元素。例如，如果表中有3行，我想删除第2行？如何将“this”传递到length-1？@tomatford：我可能在表上有一个事件处理程序，然后根据事件的目标（例如，委托处理）触发删除。我可以添加一个快速示例。TJ-应该用什么函数包装它？我试着把它放在$（）中。ready（function（），但var-product\u id或product\u price都没有发送我想，因为我的按钮是动态生成的，我需要使用jquery find？
function RemoveData() {

    var elements = document.querySelectorAll('tr'); // <== Main change
    var last = elements[elements.length-1];         // <== Note I added `var`
    last.parentNode.removeChild(last);
}