CODEWITHSUNDEEP
javascriptangularjs
Tanwer
Tanwer

Reputation: 1583

How to Remove a row from Table using angular js?

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>

Upvotes: 1

Views: 260

Answers (2)

Jasper Seinhorst
Jasper Seinhorst

Reputation: 1074

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;

Upvotes: 1

Nikolaj Dam Larsen
Nikolaj Dam Larsen

Reputation: 5674

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)

Upvotes: 1

Related Questions