Remove ionic 2 ion-card div using Javascript in controller

I need to remove an ionic 2 card when someone clicks on the trash icon. The code I have so far gives a querySelector is null error when I run it.

The view html looks like this:

  <ion-card *ngFor="#mediaItem of mediaItems" id="item{{mediaItem.id}}" class="media-item">


    <ion-card-header class="title-header">
      <div class="title-item">
        {{mediaItem.title}}
      </div>
      <ion-icon name="trash" class="bookmark_trash_icon" (click)="removeItem(mediaItem.id)"></ion-icon>
    </ion-card-header>


    <ion-card-content class="outer-content" >
      
      <img src='{{mediaItem.url}}'>

    </ion-card-content>

    <ion-item class="bookmark-media-item">
      <!-- <button (click)="topup(mediaItem)" clear item-left> -->

      <div style="float:left;">
        <ion-icon name="heart"></ion-icon>
        {{mediaItem.liked}} &nbsp;
        <ion-icon name="close-circle"></ion-icon>
        {{mediaItem.disliked}} &nbsp;
      </div>
      <a (click)="showUserProfile(mediaItem.owner, mediaItem.username)" style="float:left;">
        {{mediaItem.username}}
      </a>
      <div style="float:right;">
        <img src="img/tiny-v.png" class="bookmark-v-icon">
        {{mediaItem.credits_left}}
      </div>

    </ion-item>
  
  </ion-card>

My controller javascript code looks like this:

 removeItem(theItemID) {
    let cardToHide = '#item'+theItemID;
    document.querySelector(cardToHide).style.display = 'none';
  }

The error I get is

querySelector is null