javascript - Xóa phần tử canvas khi nhấp chuột với typescript

Tôi mới bắt đầu với TypeScript và những gì tôi đang cố gắng làm là, xóa phần tử canvas khỏi div. Vậy đây là mã HTML của tôi.

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

khi nhấp chuột loại bỏ phần tử canvas sử dụng id nav-chart. Vậy ở đây là mã JS của tôi bên trong hàm onclick

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

Khi thử điều này, nó ném ra lỗi nói tại dòng
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'.

và trong dòng này elem.parentElement.removeChild(elem)

TS2531: Object is possibly 'null'.

Câu trả lời #1

Tôi đã tìm ra giải pháp, trước tiên chúng ta phải khai báo kiểu phần tử với HTMLElement | null

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

và bên trong điều kiện.

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