I would like to add a remove button in my Angular App

Question

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?

First maybe read about Javascript arrays?: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype — AT82, Feb 13 '19 at 18:25
@rob: Please give some feedback if some answer worked or if you found another solution. Thanks for your update! — hc_dev, Feb 18 '19 at 09:36

hc_dev · Answer 1 · 2019-02-16T10:12:28.220

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 ?

The uploads will be an input where you upload files to, Its just a
tag for now but the concept is the same its adding and removing the element. — rob, Feb 13 '19 at 19:08
@rob Sorry, did fix my code `splice(uploadItem,1)` must be `splice(index, 1)` as you already recognized. And added the button-HTML. Find **complete demo** linked. — hc_dev, Feb 16 '19 at 10:14

Alexandros Markovits · Answer 2 · 2019-02-13T18:51:56.353

0

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

edited Feb 13 '19 at 18:51

answered Feb 13 '19 at 18:32

Alexandros Markovits

163
4
19

Thanks Alexandros but that code in the TS file does not work for removing the element – rob Feb 13 '19 at 18:34
Ok so your problem is the removeUp method. What are you trying to remove? The last element of the list uploads? – Alexandros Markovits Feb 13 '19 at 18:41
Check the new edited answer. The extra html you edited using the `ngFor` is correct but i see that you are not using that `upload` object of the list. You are just showing Element as text of the h2. Shouldn't you use it? – Alexandros Markovits Feb 13 '19 at 18:56
Dear @rob please always tell us WHAT and HOW something does not work (i.e. include: console-output, error-message, stacktrace, etc.). Then we can analyze faster and directly solve it. – hc_dev Feb 13 '19 at 19:07
Ok hc_dev will do next time – rob Feb 13 '19 at 19:09
So pressing the remove button does not remove the last element? If there was a reproduction or a github repo we could look into it in more depth. Consider making - sharing one. You could use codepen or something similar having angular bundled. – Alexandros Markovits Feb 13 '19 at 19:12
@AlexandrosMarkovits Did you test your code ;-) Using the **length** as _start/index_-argument to `splice` will **remove nothing**. I also thought it would roll-over. But only **start-index > length** will be 0 effectively, and **negative start/index** will be count from last-element. – hc_dev Feb 16 '19 at 10:39
No, I didn't think of anything like this could happen. Though i must say that pushing or splicing the length of the array in the array as an element is pretty weird. Good job on finding the solution. – Alexandros Markovits Feb 16 '19 at 12:03

I would like to add a remove button in my Angular App

2 Answers2

splice to remove an object from an array

Shortcuts

What to add/remove from the array?

See also

tag for now but the concept is the same its adding and removing the element.