How to delete a particular row from array using javascript?

Question

I have a problem on deleting a table row data by using JavaScript splice() method. But i cant delete the data in the meanwhile delete the first and last row of the array.

$scope.StudentDetails is my array which contains all the data like id,name,dept,age,address.,

$scope.deleteData = function (item)
{
    var index = $scope.StudentDetails.indexOf(item);
    if (index > -1)
    {
        $scope.StudentDetails.splice(index, 1);
    }
};

enter image description here

in the first image i will click delete .then it show below image ..but not delete the exact data. i am using above coding.

using below code load my data and push to the array and populate the date in the table elements.

$scope.Load = function ()
{
    $scope.StudentDetails = [];
    $http({ method: 'GET', url: '/Home/GetStudentDetails' }).success(function (data)
    {
        if (data != null)
        {
            $.each(data.Data, function (index, value)
            {
                $scope.StudentDetails.push(value);
            });

            // $scope.checked = false;
        }
    }).error(function ()
    {
        alert("Failed");
    });
}

Please help anybody!!! Thanks In advance!!!

Can you post more code (including the deletion of first/last entry)? — David Hellsing
– David Hellsing, Commented Feb 5, 2014 at 12:30
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Feb 5, 2014 at 12:34
Where does your "exact data" come from? Hardcoded or from an ajax call? In the last casse you should obviously also delete it from your db/json/xml ore other source. In the first case you need to rewrite your code very fast:-) — mainguy
– mainguy, Commented Feb 5, 2014 at 12:48

mainguy · Accepted Answer · 2014-02-06 14:43:11Z

1

It makes no sense to delete the entry in your scope, since it's coming from a ajax source. It might not be present in your scope anymore, but the next time you open the page $scope.Load() will just reload the data source. You need to write an ajax handler that is capable to delete a student from your, db/json file or wherever_your_data_is stored. Write your delete function like this:

$scope.deleteData = function (item){
    $http({ method: 'GET', url: '/Home/DeleteStudent'/'+ $routeParams.item }).success(function (data)
    {
       //After succesfull deletion reload the changed scope
        $scope.Load();
    });
};

and call it from your html like this:

<td><a ng-click="deleteData(your_id_for_this_item)">delete</a> </td>

Angular will automaticly update your scope an the dom

answered Feb 6, 2014 at 14:43

mainguy

8,3312 gold badges34 silver badges40 bronze badges

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

2 Comments

Sankar Over a year ago

sir this is ok sir ..but if there any way to delete the row without using another call

mainguy Over a year ago

No, I don't think so. At some point you have to tell you serversided data that is has changed. You could delay that and add a 'sync now' button that synchronises the datasource with the current scope of your app. But thats not the intention of ajax. In my projects every single keystroke in an Input field causes an update of the data source. There is no submit or save button anymore. Anyhow, for large datafields I do a scope reload only if the field is blurred. But changecalls to the data source happen while typing.

Mathew Berg · Accepted Answer · 2014-02-05 16:41:55Z

1

I suggest wiring up your delete something like this (this is assuming you are using an ng-repeat for the students):

<a data-ng-click="deleteStudent($index)">delete</a>

And then in your controller

$scope.deleteStudent = funciton(index){
    $scope.studentDetails.splice(index, 1);
};

The real problem with your question is that

var index = $scope.StudentDetails.indexOf(item);

Does not work like you are expecting, it doesn't look through an array of objects for an object.

edited Feb 5, 2014 at 16:41

answered Feb 5, 2014 at 14:05

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

1 Comment

glepretre Over a year ago

This is the solution I also use, but I considered that it indirectly alter the DOM (changing the scope causes ng-repeat to modify the DOM), this is why I put the delete function into a directive, without forgetting to wrap with $scope.$apply(). NB: there are some typos mistakes in your answer (that I can't edit because there are less than 6 characters) ;)

Collectives™ on Stack Overflow

How to delete a particular row from array using javascript?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related