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
Are Iframes Considered 'Bad Practice'
How to Center Elements on the Last Row in CSS Grid
Why Do Browsers Insert Tbody Element into Table Elements
Transparent Half Circle Cut Out of a Div
Margin-Top Push Outer Div Down
Responsively Change Div Size Keeping Aspect Ratio
What's the Difference Between ≪B≫ and ≪Strong≫, ≪I≫ and ≪Em≫
Is There a Float Input Type in Html5
Why Does My Image Have Space Underneath
How to Vertically Align Text Inside a Flexbox
Href Image Link Download on Click
Float:Left; VS Display:Inline; VS Display:Inline-Block; VS Display:Table-Cell;
Keep the Middle Item Centered When Side Items Have Different Widths
Change Color of Png Image Via Css
How to Force Child Div to Be 100% of Parent Div'S Height Without Specifying Parent'S Height
How to Create a Div With a Curved Bottom