Remove Dynamic Table row in jQuery isn't working

Question

I'm trying to make dynamic table with javascript that elements can be dynamically added and removed with it. Now, the remove function doesn't work probably.

I've tried .parent().parent().remove();

.parents("tr").remove();

.closest("tr").remove();

but they don't work.

The code to append to table :

$("table tbody").append("<tr><input type='hidden' name='label[]' value='" + $(".inputTitle").val() + "' /><input type='hidden' name='htmlText[]' value=\\"" + html + "\\" /><td>" + html + "</td><td>" + $(".inputTitle").val() + "</td><td>" + typeName + " ( " + crArabic + " )</td><td><a class='btn btn-danger deleteRow'><i class='fa fa-fw fa-times' aria-hidden='true'></i></a></td></tr>");

The Removal Code :

$("table tbody tr").on("click", ".deleteRow", function () {
    $(this).parent().parent().remove();
});

The expected results to this is to add and remove table rows dynamically. However, the removing event isn't working.

Answer 1

You may have to read this SO answer Difference between $(document).on(“click”, “selector”, function …); and $(“selector”).on(“click”, function …) and change your code to:

$(document).on("click", ".deleteRow", function () { $(this).parent().parent().remove(); });