javascript - Dom few instance of element -

<div md-dialog-content>   <div class="section-top">     <p id="title" style="float:left;">loading doc</p>     <div md-dialog-actions style="float:right;">       <button class="edm-button inline" md-button (click)="onnoclick()" tabindex="-1">cancel</button>       <button class="edm-button inline" md-button (click)="documentdatacomponent.onsubmit()" tabindex="-1">confirm</button>     </div>     <div>       <app-document-type></app-document-type>     </div>   </div> </div> 

in app-document-type have input

<input id="inputloadimage" type="file" name="img" multiple (change)="onchange($event)"> 

in ts.file

   constructor(private imageservice: imageservice) {       this.imageservice.message.subscribe((res: boolean) => {       this.loadedmessage = res;       this.addmessage();     });   }    ngondestroy() {     this.removemessagefromdom();   }    public onchange(event: event) {     this.loadfiles();     if(this.checkdommessageisnotempty() === true)       this.removemessagefromdom();    };    addmessage() {     let divel = document.getelementbyid('xmlcontent');      this.createcontenttomessage();     divel.appendchild(this.elem);   }    createcontenttomessage() {     if(this.elem === undefined) {        this.elem = document.createelement("p");         this.elem.textcontent = 'first load image';         this.elem.setattribute('align', 'center');         this.elem.setattribute('style', 'font-weight:bold');         this.elem.setattribute('class', 'messagedisplay');     }   }    loadfiles() {     this.loadedfiles= 0;     this.allfiles= 0;     this.listimages = [];     let files = event.target['files'];     this.allfiles = files.length;      (var = 0; < files.length; i++) {       let filereader = new filereader();       filereader.onload = () => {         let infofile: string = filereader.result;         let obj: filestructure = {           name: files[this.loadedfiles].name,           data: filereader.result,           type: files[this.loadedfiles].type         }         if(this.checkisfileinlist(obj)===false){           this.listimages.push(obj);         }         this.loadedfiles++;         this.loadimage();       }       if (filereader && files && files.length) {         filereader.readasdataurl(files[i]);       }     }   }    checkisfileinlist(file: filestructure): boolean {     let actuallistimage: filestructure[] = this.imageservice.getimages();     if(actuallistimage.indexof(file) !== -1) {       return true;     }     return false;   }    checkdommessageisnotempty(): boolean {     if(document.getelementbyid('xmlcontent').getelementsbyclassname('messagedisplay')[0] !== null)       return true;     return false;   }    removemessagefromdom(): void {      document.getelementbyid('xmlcontent').removechild(this.elem);   }    loadimage() {       this.imageservice.setimages(this.listimages);       this.isclickedfileuploader = false;       this.imageloadedevent.emit(this.isclickedfileuploader);       }   }    loadxml(event?: event) {     var myarticle = document.queryselector('article');     if(this.imageservice.getbodyres() === undefined){       if(this.checkdommessageisnotempty() === true) {         this.removemessagefromdom();       }       myarticle.textcontent = '#####';       this.xmlloadedevent.emit(this.isclicked);     } else {       myarticle.textcontent = this.imageservice.getbodyres();       this.xmlloadedevent.emit(this.isclicked);     }   } } 

i have prolbem because have few instance element created in addmessage() method. when click input message added when click cancel button modal , reload modal again next click input in window have 2

elements. in ngondestroy hook try using

this.removemessagefromdom(); 

but have error cannot read property 'removechild' of null. know in constructor should execute addmessage() once. wonder why when execute method in ngondestroy removemessagefromdom() throw error. use button , event (click) = "removemessagefromdom()" removechild working when reload modal twice still have 2

when reload 3 , click input have 3 paragraph etc..