I have an Angular App, I would like to add a remove button for a div element, I currently have an add button, which is as follows:
ts file.
uploads = [];
addUp() {
this.uploads.push(this.uploads.length);
}
I have tried
removeUp() {
this.uploads.remove(this.uploads.length);
}
This code is linked to this button as follows:
<button class="btn" (click)="addUp()">Add</button>
HTML
<div class="col" *ngFor="let upload of uploads">
<h2>Upload</h2>
</div>
How would I do the remove version?
You can't use the function remove to remove an item from an array.
splice to remove an object from an array
To remove an element from an array you should use splice:
removeUpload(uploadItem) {
// get index/position of uploadItem within array
const index: number = this.uploads.indexOf(uploadItem);
// if index returned is negative it means element not found in array
// else: (positive) index can be used
// e.g. to remove the single element at this position
if (index !== -1) {
this.uploads.splice( index, 1 );
}
}
This removes from index-position exactly one single element (thus second argument is 1 here).
Of course you to have add the argument upload as argument to button's click-event, so that the function knows which element of the array it has to remove:
<button class="btn" (click)="removeUpload( upload )" title="remove this">x</button>
See demo on stackblitz.
Shortcuts
If you want to remove the first element of the array, use array.shift().
If you want to remove the last element of the array, use array.pop().
Both functions return the removed element.
What to add/remove from the array?
I am not sure why you add/remove (push respective splice) the array's length to the uploads array. Does the array store the current size of itself or rather upload-item-objects ?
See also
A: remove item from stored array in angular 2
If I understood correctly you are trying to achieve the the same button implementation but for the remove method.
Use : <button class="btn" (click)="removeUp()">Remove</button>
And also change the removeUp method to use splice instead of remove:
removeUp() {
this.uploads.splice(this.uploads.length, 1)
}
Look at a similar question being answered here Similar question
Related
I am creating a angular application, which has one li with ng-repeat and a text box for searching the out put in ng-repeat, the repeated item has a delete "X" button which deletes the record from DB. problem i am facing is how to remove searched record from the array using splice.
http://plnkr.co/edit/oPBofD2wL2ZUrD23f8Rr?p=preview
go to above plnkr click on any of the "x" without searching, then it will get removed from the list . but when you search for something lets say ruby then only ruby will come into the list but by clicking on "x" it will still appear . I need help in removing the searched field from the array using array operation, i dont want to regenerate that array again.
instead of just using the index as a parameter, calculate your index with a search of the json element in the array.
Like so:
$scope.delete = function(project) {
idx = $scope.projects.indexOf(project);
$scope.projects.splice(idx, 1);
};
DEMO
The problem is that your idx is set to $index. That is the index of the ng-repeat, not the index of the array so when the list is filtered you're now deleting the wrong element.
(You'll notice this if you clear the search-box after deleting)
If you change your HTML to
X
The delete function will receive the actual element that needs to be removed and can be rewritten to
$scope.delete = function(project) {
$scope.projects.splice($scope.projects.indexOf(project), 1)
};
The reason is that you are sending the $index for removing, instead of that pass the id like
X
Working Demo
Try this out
$scope.delete = function(idx) {
for ( var i = 0; i < $scope.projects.length; i++){
if ($scope.projects[i].id === idx)
{
$scope.projects.splice(i, 1);
}
}
};
I have a jQuery object that is created via jQuery .find() as seen below...
var $mytable= $('#mytable');
var $myObject = $mytable.find("tbody tr");
This works great and creates a jQuery object of all the tr elements in the tbody. However, as I'm looping over the data, I need to be able to remove parts of the object as I go. For instance, if the above call returns a jQuery object named $myObject with a length of 10, and I want to remove the index 10, I thought I could just do $myObject.splice(10,1) and it would remove the element at index 10. However this doesn't seem to be working.
Any ideas why? Thank you!
UPDATE
I basically just want to be able to remove any element I want from $myObject as I loop through the data. I know it's zero based (bad example above I guess), was just trying to get my point across.
UPDATE
Okay, so I create the object using the find method on the table and at it's creation it's length is 24. As I loop over the object, when I hit an element I don't want I tried to use Array.prototype.splice.call($rows,x,1) where x represents the index to remove. Afterwards when I view the object in the console, it still has a length of 24.
Use .not() to remove a single element, then loop through the jQuery object at your leisure:
var $myObject = $mytable.find('tbody tr').not(':eq(9)'); // zero-based
http://jsfiddle.net/mblase75/tLP87/
http://api.jquery.com/not/
Or if you might be removing more than one:
var $myObject = $mytable.find("tbody tr:lt(9)");
http://jsfiddle.net/mblase75/9evT8/
http://api.jquery.com/lt-selector/
splice is not part of the jQuery API, but you can apply native Array methods on jQuery collections by applying the prototype:
Array.prototype.splice.call($myObject, 9, 1); // 0-index
You can also use pop to remove the last item:
Array.prototype.pop.call($myObject);
This should also give you a correct length property.
splice is an array method, not a jQuery object method.
Try slice
Javascript uses zero-based arrays. This means that the final item in the array (i.e. the 10th item) will be at index 9.
$myObject[9]
So you need something like this:
$myObject.splice(9, 1);
This will remove the element from your existing array, and also return it.
You could also use filter :
var $myObject = $mytable.find("tbody tr").filter(':lt(9)');
You can use .remove to remove an element from the DOM.
So to remove the element at index 9 of the $myObject array, use:
$myObject.eq(9).remove();
If you want to keep the element that you are removing, you can also do:
var removedElement = $myObject.eq(9);
removedElement.detach();
I am working on javascript project where I have 2 arrays 1. elements 2. elementsOrder ; elementsOrder array contains the names of each element, and elements array contains all properties of each element. When I want to delete one element from each array I do it with "delete" build in function, but it doesn't deletes element only sets it to Undefined, so than I use splice method to push out those undefined elements, but it doesn't work.
the is the source:
var s1 = elementsOrder.indexOf(id);
delete elements[s1];
delete elementsOrder[s1];
it does the job and sets elements one by one "undefined" smoothly, but when I do:
var s1 = elementsOrder.indexOf(id);
delete elements[s1];
delete elementsOrder[s1];
elements.splice(s1, 1);
elementsOrder.splice(s1, 1);
using simply splice methods don't work:
var s1 = elementsOrder.indexOf(id);
elements.splice(s1, 1);
elementsOrder.splice(s1, 1);
I use this piece of code in my Javascript Canvas project to animate some canvas objects, so I can easily see when "delete" works smoothly and "undefines" elements one by one, and splice doesn't works so smoothly and doesn't puts out elements one by one
Please see http://jsfiddle.net/7ZuuZ/ pay atantion to function animate, third function from bottom
Why not just splice in the first place?
var s1 = elementsOrder.indexOf(id);
elements.splice(s1,1);
elementsOrder.splice(s1,1);
There is no need to delete here.
I am setting an element in an array like this:
dialogs[id] = $.modal({
title: "Admin",
closeButton: true,
content: content,
width: false,
resizeOnLoad: true,
buttons: {
'Close': function (win) {
win.closeModal();
}
}
}).find('form') // Attach logic on forms
.submit(formSubmitHandler)
.end();
Later on I check if exists like this:
if (!dialogs[id]) {
loadAndShowDialog(id, link, url);
}
How can I remove the id record from the dialogs array? Is there something like a dialogs[id].Remove() ?
the command is : (set it to undefined)
delete dialogs[id];
if you want to completely remove : use splice.
edit
I mistakely thought that its is an object property which you want to remove ( delete will be fine here - and only solution)
howevert - you have an Array and the correct answer is to use splice.
I suggest you take a look at this tutorial. It explains really well how to play with arrays in javascript.
The delete method doesn't delete an element, it just replaces it with undefined. To delete elements from an array, you need splice.
According to MDN, here is how to use it:
array.splice(index , howMany[, element1[, ...[, elementN]]])
So, you need the index where you want to start deleting, and howMany is the number of elements you want to delete.
For your case, it'd be:
dialogs.splice( dialogs.indexOf( id ), 1 )
Note the use of indexOf to find out the index of the id value.
when removing an item from an array, use splice
dialogs.splice(id,1); //remove "1" item starting from index "id"
note that this removes the item, and changes the array length. so in an array of 3, if i spliced this way, the array will now have a length of 2.
using delete will not affect the array, but leave that location undefined. it's like "unsetting" or "leaving a hole" in that location.
delete dialogs[id]; //value at index "id" is now undefined
You can use
delete dialogd[id]; //will not remove element, will set it to undefined
or
dialogs.splice(id,1); //will not work in case of non-numeric indices
Choose whichever one is appropriate. I prefer the second.
rowData = [];
alert(rowData[0]);
gives me [Ti.UI.TableViewRow]
Now how can i remove this element... i have been using rowData.splice(), but i have no idea on what to pass to remove it.
Thanks
try rowData.splice(0, 1); the first argument indicates the index of item to be removed, the second indicates how many items should be removed
In the code you present rowData should be empty, so rowData[0] should be undefined. I suppose something is pushed to rowData in between? Anyway, there are several ways to remove elements from arrays:
You can remove all elements at once
from an array using rowData.length =
0.
If you want to remove 1 element, use
the Array.splice method. E.g.
removing the first element:
rowData.splice(0,1) (means remove
1 element of rowData starting from
element 0 (the first element).
If it's only the first element you
want to remove you could also use the
shift method: rowData.shift().
The last method you can use is
slice: rowData = rowData.slice(1)
(means: give me all elements from
rowData starting at the first element and
assign the result to rowData),
or rowData.slice(1,4) (means:
give me all elements from
rowData starting at the first element,
ending at the fourth element, and
assign the result to rowData).
If you want to remove the element(s) entirely, splice() will return a new array with the member(s) removed.
You can also use the delete operator, but this won't affect the Array size and the member will be undefined. This is will also make it non enumerable.