1

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.

Hema D.
  • 140
  • 2
  • 5
  • 17

1 Answers1

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(); });
NaDeR Star
  • 647
  • 1
  • 6
  • 13