使用打字稿单击删除画布元素

Question

I am new to typescript and what i am trying is, to remove canvas element from the div. So here is my HTML code.

<div class="chart">
    <canvas id="nav-chart"></canvas>
</div>

on click removing the canvas element using id nav-chart . So here my JS code inside the onclick function

const elem: HTMLElement = document.getElementById('nav-chart')
if (elem) {
   elem.parentElement.removeChild(elem)
}

While trying this it throws the error saying at the line
const elem: HTMLElement = document.getElementById('nav-chart')

TS2322: Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
  Type 'null' is not assignable to type 'HTMLElement'.

and in this line elem.parentElement.removeChild(elem)

TS2531: Object is possibly 'null'.

Answer 1

I found the solution first we have to declare the element type with HTMLElement | null HTMLElement | null

const elem: HTMLElement | null = document.getElementById('nav-chart')

and inside the condition.

if (elem) {
      elem.parentElement && elem.parentElement.removeChild(elem)
}

Answer 2

That's not how Angular works.

showCanvas = true;

<div class="chart" (click)="showCanvas = false">
    <canvas id="nav-chart" *ngIf="showCanvas"></canvas>
</div>

I highly suggest you to learn the concepts of Angular before using it to code. Most of the developers do as you did, and most of the time, they end up misusing the framework.

Spend all the time you need on learning the framework philosophy, THEN learn to use it !