Question

我正在尝试添加新行并删除表格。我有以下代码：

$(document).ready(function() {

var n_obs = $("input[name$='[obs]']").length;
var n_esp = $("select[name$='[e_status]']").length;

addEsp = (function() {
    $("#tb_especialidade").append("<tr><td>" + n_esp + "</td></tr>");
    n_esp++;
});

addObs = (function() {
    $("#tb_status").append(
            "<tr>" +
            "<td>" + n_obs + "</td>" +
            "<td><input type=\"button\" value=\"Cancelar\" onclick=\"rem();\"></td>" +
            "</tr>"
            );
    n_obs++;
});

rem = (function() {
    $(this).closest("tr").remove();
});
});

添加新元素是有效的，但不能删除。有什么建议吗？

Answer 1

我建议采用另一种方法。

将this作为元素传递给rem()

"<td><input type=\"button\" value=\"Cancelar\" onclick=\"rem(this);\"></td>" 
--------------------------------------------------------------^----------

this指的是当前元素，然后很容易找到tr中rem()最近的父级。

将脚本更改为此

rem = (function(elem) {
    $(elem).closest("tr").remove();
});

Answer 2

尝试：

$(this).parent().parent().remove();

Answer 3

尝试在此处使用单独的click事件，而不是使用嵌套的onclick函数并应用event delegation，因为您的输入按钮已动态添加：

$('#tb_status').on('click', 'input[type="button"]', function() {
    $(this).closest("tr").remove();
});

Jquery .remove（）不在表中工作

3 个答案: