CODEWITHSUNDEEP
jqueryangularjs
FrenkyB
FrenkyB

Reputation: 7197

$(this) inside tabled td is returning undefined

I have a table with a cell:

<td>
<i class="fa fa-trash-o trashIcon ng-scope" 
aria-hidden="true" 
ng-click="DeleteRow(jQuery(this));"></i>
</td>

When the function DeleteRow is called, elementToDelete is undefined:

enter image description here

Why is jQuery(this) not returning <i> element?

Upvotes: 0

Views: 58

Answers (3)

Sudharsan S
Sudharsan S

Reputation: 15393

Pass $event in the ng-click angularjs

<td><i class="fa fa-trash-o trashIcon ng-scope" 
aria-hidden="true" 
ng-click="DeleteRow($event);"></i>
</td>


$scope.DeleteRow = function(event) {
  console.log($(event.target));
  jquery(event.target).remove()
}

Demo

Upvotes: 1

Beginner
Beginner

Reputation: 4153

pass $event in your function

<td>
    <i class="fa fa-trash-o trashIcon ng-scope" 
     aria-hidden="true" ng-click="DeleteRow($event);">Delete
    </i>
</td>

use $event.currentTarget to select the current selected element

$scope.DeleteRow = function($event) {
    $event.currentTarget.remove();
}

JS Fiddle

Upvotes: 1

SURJEET SINGH Bisht
SURJEET SINGH Bisht

Reputation: 881

i think you bind this td by ng-repeat so during this you just place the same object in the ng-click: suppose : 

   <div ng-repeat="set_listing in get_listing">
    <div class="width_hun">

            <p class="item_name" ng-click="DeleteRow(set_listing)"></p>


    </div>
</div>

then you can access your current event easily

Upvotes: 0

Related Questions