CODEWITHSUNDEEP
javascriptangularjs
No1Lives4Ever
No1Lives4Ever

Reputation: 6883

AngularJS: Removing the parent element

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:

  1. How this can be done right?
  2. 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();?

Upvotes: 3

Views: 3502

Answers (5)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

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.

Upvotes: 3

Abhishek Jain
Abhishek Jain

Reputation: 26

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.

Upvotes: 1

ashfaq.p
ashfaq.p

Reputation: 5469

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.

Upvotes: 4

BorisD
BorisD

Reputation: 189

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(); 
};

Upvotes: 3

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

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);
      }

Upvotes: 5

Related Questions