How to Remove a row from Table using angular js?

Question

I am using Angular http service to perform a DELEET operation , Its working fine , after deleting the data record I have to remove that row also from table .

Below is my code for all that

$scope.DeleteSchedule = function (recordId) {
   var v =$window.confirm('Are you sure you want to delete ?');
   if (v == true) {
       var row = '#row' + recordId;
       var table = 'table #tbl_Schedule_Delete tr ' + row;
       $http({
           url: '@Url.Action("DeleteSchedule", "Admin")',
           method: "DELETE",
           params: {
               recordId: recordId
           }
       }).then(function mySuccess(response) {
           alert('Row Deleted Successfully');
           angular.element(document.querySelector(table)).remove();
           //$('table #tbl_Schedule_Delete tr' + row).remove();
       }, function myError(response) {
           $window.alert('Warning! It failed.');
       });
   }
}

Refrence to jQuery remove() seems to do nothing

value of variable table will be 'table #tbl_Schedule_Delete tr #row35'

angular.element(document.querySelector(table)).remove();

I checked console log and there is no error or warning . How to do this in angular JS

Update 1 : Below is Table Mark Up

<tr id="row34" role="row" class="odd">
<td id="delete34" class="sorting_1"> 
<a id="deletebtn_34" ng-click="DeleteSchedule('34')"><i class="fa fa-times fa-lg" aria-hidden="true" style="color:#e90029"></i></a>
</td>
<td>34</td>
<td>11956</td>
<td>Tota Ram</td>
<td>04-10-2017</td>
<td>02-12-2017</td>
<td>Haryana</td>
<td>Badaun</td>
<td>03-11-2017</td>
</tr>

How do you load data to the table? if you load from an array you just need to remove the value from the array and the table will update — Marcus Höglund, Nov 06 '17 at 07:30
HTML Mark up for Table is getting returned from MVC Controller through Model Property — Tanwer, Nov 06 '17 at 08:22
While this may not fix your problem the use of `querySelector` inside `àngular.element` is redundant, since `angular.element` already queries elements by selector (it's basically equivalent to `$(selector)`). So `angular.element(document.querySelector(table))` could be reduced to `angular.element(table)` — Nikolaj Dam Larsen, Nov 06 '17 at 09:41
@NikolajDamLarsen , does it depend on version ? angular.element does not seems to work . I am using https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js — Tanwer, Nov 06 '17 at 12:32
It shouldn't. If you have jquery loaded, `angular.element(selector)` basically acts like an alias to `jQuery(selector)`. — Nikolaj Dam Larsen, Nov 06 '17 at 12:43

Nikolaj Dam Larsen · Answer 1 · 2017-11-06T09:57:48.653

The problem is with your selection query. The selector

table #tbl_Schedule_Delete tr #row35

actually matches the following HTML structure:

<table>
    <any-element id="#tabl_Schedule_Delete">
        <tr>
            <any-element id="#row35"></any-element>
        </tr>
    </any-element>
</table>

As you can see, this doesn't match your HTML structure. This is because your selection query contains a couple of whitespaces when matching elements and ids. This causes it to look for child elements when matching the ids.

To fix it, your selector should instead look like this:

var table = 'table#tbl_Schedule_Delete tr' + row; 
// Notice the lack of whitespaces after 'table' and 'tr'

Side note: using document.querySelector() inside angular.element() is redundant. You could simply use angular.element(table) since, angular.element is equivalant to using $(selector) (it's actually exactly the same, in case that you have jquery loaded)

score 1 · Accepted Answer · answered Nov 06 '17 at 10:06

1

I wouldn't delete the row using angular.element but show/hide the row with ng-if of ng-show.

<tr id="row34" role="row" class="odd" ng-show="!deleted[34]">

in combination with:

after deletion in your controller:

scope.deleted[recordId] = true;

answered Nov 06 '17 at 10:06

Jasper Seinhorst

1,056
6
19

That's smart , Perfect with MVC and Less Code – Tanwer Nov 06 '17 at 12:34
Small addition: it's better to use ng-if, because your overall pagespeed and responsiveness will be faster. – Jasper Seinhorst Nov 06 '17 at 12:36
Need to add one more thing , to use this approach we need to initialize $scope.deleted=[] in angular js controller , Otherwise it will give error can not set property 'recordId' of undefined cause deleted is not defined as array in controller – Tanwer Nov 07 '17 at 05:22

How to Remove a row from Table using angular js?

2 Answers2