CODEWITHSUNDEEP
javascriptjquery
Hema D.
Hema D.

Reputation: 138

Remove Dynamic Table row in jQuery isn't working

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.

Upvotes: 1

Views: 339

Answers (1)

NaDeR Star
NaDeR Star

Reputation: 655

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(); });

Upvotes: 1

Related Questions