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
– Marcus Höglund, Commented Nov 6, 2017 at 7:30
HTML Mark up for Table is getting returned from MVC Controller through Model Property — Tanwer
– Tanwer, Commented Nov 6, 2017 at 8: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
– Nikolaj Dam Larsen, Commented Nov 6, 2017 at 9:41

Jasper Seinhorst · Accepted Answer · 2017-11-06 10:06:48Z

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 6, 2017 at 10:06

Jasper Seinhorst

1,0746 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tanwer Over a year ago

That's smart , Perfect with MVC and Less Code

Jasper Seinhorst Over a year ago

Small addition: it's better to use ng-if, because your overall pagespeed and responsiveness will be faster.

Tanwer Over a year ago

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

Nikolaj Dam Larsen · Accepted Answer · 2017-11-06 09:57:48Z

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)

Collectives™ on Stack Overflow

How to Remove a row from Table using angular js?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related