How to remove parent element on click? - AngularJS

Question

I have a button beside my list item which is to remove the list item.

My button is inside the list so I am trying to find a way to remove the parent element. I have a directive able to remove the element itself but not with the parent. I tried adding parent.remove() instead of just remove() but I kept on getting error with AngularJS doesn't know what parent is.

I have my html as

<ul ng-repeat="item in items | filter:{ pos: 'column1' }">
   <li>{{item.name}}<button remove-on-click ng-click="remove()" 
       class="remove-button fa fa-times"></button>
   </li>
</ul>

I have my directive as

.directive('removeOnClick', function() {
  return {
     link: function (scope, element, attrs) {
       scope.remove = function () {
           element.remove();
       };
     }
   }
 });

Can someone please give me a hand? Thanks in advance.

Answer 1

omg! I am so sorry everyone, I kept on trying parent and other ways and now I found out my stupidest mistake! Just using parent().remove() would eventually work!

Answer 2

Write $event inside your ng-click="remove()" function ,so the ng-click function will be ng-click="remove($event);"

$scope.remove = function(e){
    console.log(e.target); // you can see button in console
    $(e.target).parent().remove();
}