删除Angular2中动态创建的节点

Question

动态创建节点：

 var div = $('#imgDiv');
          div.css("column-count","5");
          for (var i = 0; i < this.fileSize; i++)
          {
            var nav = $('<nav id = "holder"></nav>');
            var img = $('<img id="dynamic">').css("max-width","200px").css("max-height","200px").css("padding","5px"); 
            var button = $('<button  id="dynamicButton" >Add to collection</button>')
            img.attr('src', this.returnFile[i]);

            img.appendTo(nav);
            button.appendTo(nav);
            nav.appendTo(div);
          }

删除节点：

for(var i = 0; i < this.fileSize; i++)
       {
         $('#imgDiv').closest('#holder').html('');
       }

HTML：

    <!--called from login-auth.html-->
<div class ='mainDiv' *ngIf="afAuth.authState | async; let user; else errorNoUserLoggedIn" >

     <div style="text-align:left">
        <input type="text" #query>Enter search term: 
        <button (click) = "loadImage(query.value)">Search!</button>
    </div>

    <div style="text-align:right" class="navbar">
        <button routerLink = '/login' (click) = "logout()">Logout</button>
    </div>

    <br>
    <div class = "imgDivClass" id = "imgDiv" style="text-align:left"></div>

</div>

我正在尝试删除我在动态创建的节点部分中创建的节点。当我执行$('#imgDiv').html('')之类的操作时，它只会删除图像的src部分。按钮和img标签仍在那里。