How to Delete an Item or Object from an Array Using Ng-Click

How do I delete an item or object from an array using ng-click?

To remove item you need to remove it from array and can pass bday item to your remove function in markup. Then in controller look up the index of item and remove from array

<a class="btn" ng-click="remove(item)">Delete</a>

Then in controller:

$scope.remove = function(item) { 
var index = $scope.bdays.indexOf(item);
$scope.bdays.splice(index, 1);
}

Angular will automatically detect the change to the bdays array and do the update of ng-repeat

DEMO: http://plnkr.co/edit/ZdShIA?p=preview

EDIT: If doing live updates with server would use a service you create using $resource to manage the array updates at same time it updates server

Delete object from array on click

Its because when you create new elements in the dom the listeners of old elements are being removed together with the old elements. Just move the event listener registration into create method.

const array = [
{name: 'John'},
{name: 'David'},
{name: 'Peter'},
{name: 'Michael'}
];

const create = () => {
const app = document.querySelector('.app');
app.innerHTML = '';

for(let i=0;i<array.length;i++){
app.innerHTML +=
`<div class="item"><span class="erase">☓</span>${array[i].name}</div>`;
}

const erase = document.querySelectorAll('.erase');

erase.forEach(item => {
item.onclick = () => {
const itemText = item.parentElement.textContent.substr(1);
const itemPos = array.findIndex(item => item.name == itemText);


console.log(itemText + ' ' + itemPos);
console.log(array);
array.splice(itemPos, 1);
create();
}
});
}

create();
.erase{
color: red;
margin-right: 20px;
cursor: pointer;
}
.item{
margin-bottom: 10px;
}
<div class="app"></div>

Angular - Remove item from array on click of that item

Pass the item index to splice and specify that one item is to be removed:

<li *ngFor="let toDo of toDoList; let i = index" (click)="toDoList.splice(i, 1)">

See this stackblitz for a demo.

Deleting an object from an array on click of a button

The second part of your deleteItem function's body seems useless. While there are couple of ways to resolve it, I suggest the following:

function deleteItem(e) {
var ul = document.getElementById('list');
ul.removeChild(li);

var foundIndex = tweets.findIndex(function (tweet) {
return tweet.id == id;
});
if (foundIndex > -1) {
tweets.splice(foundIndex, 1);
}
}

How to remove elements/nodes from angular.js array

There is no rocket science in deleting items from array. To delete items from any array you need to use splice: $scope.items.splice(index, 1);. Here is an example:

HTML

<!DOCTYPE html>
<html data-ng-app="demo">
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div data-ng-controller="DemoController">
<ul>
<li data-ng-repeat="item in items">
{{item}}
<button data-ng-click="removeItem($index)">Remove</button>
</li>
</ul>
<input data-ng-model="newItem"><button data-ng-click="addItem(newItem)">Add</button>
</div>
</body>
</html>

JavaScript

"use strict";

var demo = angular.module("demo", []);

function DemoController($scope){
$scope.items = [
"potatoes",
"tomatoes",
"flour",
"sugar",
"salt"
];

$scope.addItem = function(item){
$scope.items.push(item);
$scope.newItem = null;
}

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

Removing items from an array with Angular

You can pass an $index in your click function like this.

<i class="fa fa-times" ng-click="removeGalleryItem(galleryItem, $event , $index)">

and use $scope.galleries.splice(index, 1); inside your click function removeGalleryItem, make sure you have index parameter too like this.

$scope.removeGalleryItem = function(gallery , event, index){
$scope.galleries.splice(index, 1);
};

Hope this helps..

How to delete element from object?

You can use splice :

$scope.removeFile = function(file){
var index = $scope.files.indexOf(file);
$scope.files.splice(index,1);
}


Related Topics



Leave a reply



Submit