JQuery .remove() не работает в таблице

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

Try:

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

Answer 2

Попробуйте использовать отдельный click событие здесь вместо того, чтобы использовать вложенную onclick функции и применять event delegation поскольку ваша кнопка ввода была добавлена ​​динамически:

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

Answer 3

Я хотел бы предложить другой подход ,

Pass this как элемент в качестве ссылки на rem()

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

Где this относится к текущему элементу, то это будет легко найти ближайший tr родителя в вашем rem().

Изменить сценарий к этому

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