How to delete a DOM element using Angular 6

Question

How to delete a DOM element using Angular 6

I need to implement the functionality of removing a specific block of HTML tags from the DOM when clicked.

<tr *ngFor="let item of uploader.queue">
  <th width="90%">{{ item.file.name}}({{item.file.size/1000000}} MB)</th>
  <th class="text-center" width="10%">
    <mat-icon (click)="item.remove()">delete</mat-icon>
  </th>
</tr>

The .remove() function is functioning correctly in this block.

<tr *ngFor="let items of uploaded_files">
  <th width="90%">{{uploaded_files}} </th>
  <th class="text-center" width="10%">
    <mat-icon (click)="items.remove()">delete</mat-icon>
  </th>
</tr>

However, the .remove() function is not working as expected in this block, resulting in the following error message: _v.context.$implicit.remove is not a function(…)

angular typescript angular6

Answer 1

Answer №1

In case you prefer not to delete an item from the array but simply want to remove an element:

You need to include #item inside the tr tag and then modify items.remove() to item.remove()

For example:

<tr *ngFor="let items of uploaded_files" #item>
    <th width="90%">{{uploaded_files}} </th>
    <th class="text-center" width="10%">
        <mat-icon (click)="item.remove()">delete</mat-icon>
    </th>
</tr>

Answer 2

In case you prefer not to delete an item from the array but simply want to remove an element:

You need to include #item inside the tr tag and then modify items.remove() to item.remove()

For example:

<tr *ngFor="let items of uploaded_files" #item>
    <th width="90%">{{uploaded_files}} </th>
    <th class="text-center" width="10%">
        <mat-icon (click)="item.remove()">delete</mat-icon>
    </th>
</tr>

Answer 3

Answer №2

It is likely that the variable uploaded_files is structured as an array, meaning it may not inherently support a delete function for its elements.

One possible approach to removing elements is by their index:

public removeUploadedFile(index: number): void {
   uploaded_files.splice(index, 1);
}

Additionally,

<tr *ngFor="let items of uploaded_files; let i = index">
  <th width="90%">{{uploaded_files}} </th>
  <th class="text-center" width="10%">
    <mat-icon (click)="removeUploadedFile(i)">delete</mat-icon>
  </th>
</tr>

Answer 4

It is likely that the variable uploaded_files is structured as an array, meaning it may not inherently support a delete function for its elements.

One possible approach to removing elements is by their index:

public removeUploadedFile(index: number): void {
   uploaded_files.splice(index, 1);
}

Additionally,

<tr *ngFor="let items of uploaded_files; let i = index">
  <th width="90%">{{uploaded_files}} </th>
  <th class="text-center" width="10%">
    <mat-icon (click)="removeUploadedFile(i)">delete</mat-icon>
  </th>
</tr>

How to delete a DOM element using Angular 6

Answer №1

Answer №2

Similar questions

Discovering new bugs in VSCode Playwright Tests but failing to see any progress

Having trouble with SVG Circles - Attempting to create a Speedometer design

What is the step-by-step process for generating a tsconfig.json file within an Angular 2

Conditionally displaying a select element using Ng-if

TypeScript encounters difficulty locating the div element

Obtaining distinct form control values for replicated form fields with Angular

New substitute for extending the extent in OpenLayers 4

What is the best way to determine if a variable exists within an array in Angular and JavaScript?

You are not allowed to have a union type as the parameter type for an index signature. If needed, consider using a mapped

Passing parameters to an Angular CLI ejected app

Is there a way to programmatically set a dropdown value by using the dropdown value's identifier?

Ensuring the correct type of keys during Object.entries iteration in TypeScript

Utilize Angular Guards and RxJS to coordinate the flow of data between parent and child Guards. Ensure that the Child Guard waits for the parent

What are some strategies for accessing the original values of form components that have not been altered when using ngModel?

Issue with displaying MP4 movies in Angular

How can you position the input cursor at the end of the default text when navigating through fields with the tab key?

Prettyprint XML in Angular 8+ without using any external libraries

Display the modal in Angular 8 only after receiving the response from submitting the form

The npm audit command flagged an issue with an invalid tag name,

Child component utilizing Angular reactive form