How to remove an element from an array at particular position in angularjs/javascript

Question

In my case I have a form when i click add button the features and image filed row will add dynamically and I can add data.Now I want to remove the particular row at some position.I have tried using splice slice and pop .But pop removes only last row.When I use slice and splice the data of removed row is not clearing and the row itself not clearing.Here is my code below

$scope.rows = [];  
$scope.current_rows = 1;
$scope.destination_details = {};
$scope.rows.push({
    row_num: $scope.current_rows
});

// code for adding a row dynamically
 $scope.add = function () {
    $scope.rows.push({
        row_num: $scope.current_rows + 1,
    });
};

//code for removing row dynamically
     $scope.remove = function ($index) {
    $scope.rows.splice({
        row_num: ($index, 1),
    });
    $scope.destination_details.destination_features1[$index] = '';
    $scope.destination_image_arr[$index] = '';
};

When i use :

    $scope.rows.slice({
        row_num: ($index, 1),
    });

It is clearing the data at that particular position,but the row is not closing. When i use :

   $scope.rows.pop({
        row_num: $scope.current_rows - 1,
    });

Only the last row is deleting. Here is my HTML code :

  <div class="row" ng-repeat="row in rows track by $index">             
            <div class="col s12 m4">
                <label>Upload Images </label>
                <div class="input-field col s11">
                    <input  type="file" id="image" name="image_{{$index}}" ng-files="get_files($files,$index)" ng-model="destination_details.image[$index]" ng-required="true" multiple/>
                    <div ng-messages="add_destination_form['image_' + $index].$error" ng-if="add_destination_form['image_' + $index].$dirty || add_destination_form.$submitted">
                        <div ng-message-exp="['required']">
                            <span class="error">Please add alteast one image !</span> 
                        </div>
                    </div>
                    <div ng-if="destination_image_arr[$index].length > 0" id="post_img">                      
                        <a ng-click="uncheck_files($index)"  title="close" style="cursor:pointer" class="close_image_upload">X</a>    
                        <img  class="thumb" ng-src="{{destination_image_arr[$index]}}">
                    </div>
                    <div id="img_err_msg"></div>
                    <br><br><br>
                  </div>                                       
               </div>
            <div class="col s12 m4" >
                <label for="destination_features1" >Features</label>
                <textarea  id="destination_features1" name="destination_features1_{{$index}}" ng-model="destination_details.destination_features1[$index]" placeholder="Mandatory" type="text" ng-required="true"></textarea>                        
                <div ng-messages="add_destination_form['destination_features1_' + $index].$error" ng-if="add_destination_form['destination_features1_' + $index].$dirty || add_destination_form.$submitted">
                    <div ng-message-exp="['required']">
                        <span class="error">Description is required</span>  
                    </div>
                </div> 
            </div>
             <div class="col s12 m4">   
                <button ng-show="show_removebtn" id="removeButton" class="waves-effect waves-light btn" ng-click="removeDynamically($index)" type="button">Remove</button>                              
            </div>
        </div>
        <div class="col s12 m4">                 
         <button class="waves-effect waves-light btn" ng-click="addDynamically()" type="button">Add More</button>                               
        </div>

Any help would be appreciated.Thanks

$scope.rows.splice($index, 1); should work.

Ashish
– Ashish

2017-08-14 12:05:24 +00:00
Commented Aug 14, 2017 at 12:05 — Ashish
– Ashish, Commented Aug 14, 2017 at 12:05

atiq1589 · Accepted Answer · 2017-08-14 11:53:14Z

4

If you want to splice a particular position. Here is the reference Array.prototype.splice()

var array = [1, 2, 3, 4]
array.splice(2, 1);
console.log(array);

Here position 2 has been removed and it will remove 1 time define in second parameter.

In your code try to do this:

$scope.rows.splice($index, 1);

edited Aug 14, 2017 at 11:53

answered Aug 14, 2017 at 11:49

atiq1589

2,3351 gold badge19 silver badges25 bronze badges

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

5 Comments

Shaik Nizamuddin Over a year ago

When i use splice all the rows are deleting and the data is also not clearing

atiq1589 Over a year ago

from where you are calling your remove method. i see removeDynamically() called in button click.

Shaik Nizamuddin Over a year ago

Yes I am removing it on button click action

atiq1589 Over a year ago

If its not solved yet, can you post your latest code? and I think you can remove id attribute from the button. it causing button with same id in ng-repeat.

Shaik Nizamuddin Over a year ago

Yes here is my code : plnkr.co/edit/WETSLqOXlTwiHq4p9IUt?p=preview

Collectives™ on Stack Overflow

How to remove an element from an array at particular position in angularjs/javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related