从 angular 中的外部 javascript 文件中销毁元素

Question

I am currently adding an element from an external javascript source upon OnInit using this

HTML

<div id='jsContainer' #jsContainer></div>

TS FILE

let jsDiv = document.getElementById('jsContainer')
script.src = url
script.async = true;
this._renderer2.appendChild(jsDiv,script);

Now I want to destroy or remove the element upon ngOnDestroy

I tried to do this

if (document.getElementById('jsContainer')) {
  let jsDiv = document.getElementById('jsContainer')
  this._renderer2.removeChild(this._document.body, jsDiv);
}

And also this

this._renderer2.removeChild(this.elementRef.nativeElement, this.script);

But none of them are working. Any idea of how to destroy the element dynamically?

Answer 1

removeChild() expects the first parameter to be the parent node of the node you're trying to remove: https://angular.io/api/core/Renderer2#removechild

Since your're appending the element to jsDiv :

this._renderer2.appendChild(jsDiv,script);

you need to remove it from jsDiv as well:

let jsDiv = document.getElementById('jsContainer')
this._renderer2.removeChild(jsDiv, this.script);