AngularJS: Removing the parent element

Question

I have li item that repeat, according to $scope.items list. In each li I have a checkbox. What I want to do is to catch the change event of this checkbox and do my work there. Executed in $scope.change function.

When my work done, I want to remove the row of the checked checkbox.

My code so far:

<!doctype html>
<html>
<head>
  <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
  <script>
        var app = angular.module('myapp', []);
        app.controller('mainController', function($scope) {
          $scope.items = ["item1", "item2", "item3"];
          $scope.change = function() {
                // My work here.
                // ...

                // Work is done. remove the caller checkbox.
                this.parent.remove(); // <--- BOOM.
          }
        });     
  </script>  
</head>
<body ng-app="myapp">
  <div ng-controller="mainController">
    <ul>
      <li ng-repeat="item in items">
        <input type="checkbox" ng-model="checked" ng-change="change()">
      </li>
    </ul>
  </div>
</body>
</html>

Live version is here: http://plnkr.co/edit/05IBKp6aVoj1SqFNi5JJ

My problem is in this code-line:

this.parent.remove(); // <--- BOOM.

My target is to remove the parent li.

Questions:

How this can be done right?
When I using the this keyword (in controller.change function), is this something that I can use with JQuery syntax? Something like $(this).parent().remove();?

Not working for me. See live version here: plnkr.co/edit/kQaSALQukbPv5Cerh8yr — No1Lives4Ever
– No1Lives4Ever, Commented Feb 7, 2016 at 10:17
plnkr.co/edit/ElFt3Qvkr17M4audr3ev?p=preview check this now. Its working — ashfaq.p
– ashfaq.p, Commented Feb 7, 2016 at 10:28

Zohaib Ijaz · Accepted Answer · 2016-02-07 10:13:48Z

5

You can delete the item from $scope.items and it will be automatically removed and you don't need to use jQuery.

I updated the plunker http://plnkr.co/edit/3aYHQspeLAj3VryQAhBT?p=preview

<ul>
  <li ng-repeat="item in items">
    <input type="checkbox" ng-model="checked" ng-change="change(item)">
</li>

and in JS

$scope.change = function(item) {
           // Work is done. remove the caller checkbox.
           var index = $scope.items.indexOf(item);
           $scope.items.splice(index, 1);
      }

answered Feb 7, 2016 at 10:13

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

1 Comment

Saksham Over a year ago

just pass the index in change event. why calculate it again?

ashfaq.p · Accepted Answer · 2016-02-07 10:27:42Z

Please have a look at this plunker, I have used ng-click to detect the change and I have passed the $event as the parameter.

<!doctype html>
<html>
<head>
  <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
   <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script>
    var app = angular.module('myapp', []);
    app.controller('mainController', function($scope) {
      $scope.items = ["item1", "item2", "item3"];
      $scope.change = function(e) {
            // My work here.
            // ...
            console.log($(this));
            console.log(e.target);
            // Work is done. remove the caller checkbox.
            $(e.target).parent().remove(); // Not working
      }
    });     
 </script>  
</head>
<body ng-app="myapp">
 <div ng-controller="mainController">
<ul>
  <li ng-repeat="item in items">
    <input type="checkbox" ng-model="checked" ng-click="change($event)">
  </li>
</ul>
</div>
 </body>
 </html>

Remove li by passing the $event.

BorisD · Accepted Answer · 2016-02-07 10:24:42Z

3

Changed:

html:

<ul>
   <li ng-repeat="item in items">
      <input type="checkbox" ng-model="checked" ng-click="change($event)">
   </li>
</ul>

js:

$scope.change = function (e) {             
    angular.element(e.target).parent().remove(); 
};

answered Feb 7, 2016 at 10:24

BorisD

1892 silver badges9 bronze badges

Comments

RIYAJ KHAN · Accepted Answer · 2016-02-07 13:15:02Z

3

Please do following change.

HTML:

<ul> <li ng-repeat="item in items"> <input type="checkbox" ng-model="checked" ng-change="change($index)"> </li>

JS.

  $scope.change = function(index) { 
         $scope.items.splice(index, 1);
 }

Que.2

You can do this using jqLite and directive.

edited Feb 7, 2016 at 13:15

answered Feb 7, 2016 at 10:21

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Comments

Abhishek Jain · Accepted Answer · 2016-02-07 10:35:55Z

I am assuming you are trying to implement a simple checklist functionality.

You could pass the $index for onChange function and then use array.splice() method to perform the following action.

      <!doctype html>
      <html>
      <head>
        <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
        <script>
              var app = angular.module('myapp', []);
              app.controller('mainController', function($scope,$timeout) {
                $scope.items = ["item1", "item2", "item3"];
                $scope.prevItem ={
                    value: null,
                    index: null
                }
                $scope.change = function(index) {
                 $timeout(function(){
                  // Your work here.
                  $scope.prevItem.value = $scope.items[index];
                  $scope.prevItem.index = index;
                  $scope.items.splice(index, 1);
                 }, 300);
               }
               $scope.undoCheck = function(){
                $scope.items.splice($scope.prevItem.index, 0, $scope.prevItem.value);
               }
              });     
        </script>  
      </head>
      <body ng-app="myapp">
        <div ng-controller="mainController">
          <ul>
            <li ng-repeat="item in items">
              <input type="checkbox" ng-model="checked" ng-change="change($index)">
              {{item}}
            </li>
          </ul>
          <button ng-click="undoCheck()">Undo Previous Check</button>
        </div>
      </body>
      </html>

I have also added undo functionality to just help you get more clarity on splice function.

The timeout function is added to just show the check on the checkbox before removing it.

Collectives™ on Stack Overflow

AngularJS: Removing the parent element

Questions:

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Questions:

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related