javascript - 使用 typescript 点击删除 Canvas 元素

Question

我是 typescript 的新手，我正在尝试从 div 中删除 Canvas 元素。所以这是我的 HTML 代码。

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

点击删除使用 id nav-chart 的 Canvas 元素。所以这里我的 JS 代码在 onclick 函数中

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

尝试此操作时，它会在
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'.

并在这一行 elem.parentElement.removeChild(elem)

TS2531: Object is possibly 'null'.

Answer 1

我首先找到了解决方案，我们必须使用 HTMLElement | 声明元素类型空

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

在条件内。

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