title: function to remove/delete template from the DOM
body: <p>I've been working on this for a few hours and I can't seem to figure it out.</p>
  
  <p>I am trying to get this function to remove the template when the button is clicked </p>
  
  <p>here is the html of the template.</p>
  
  <pre><code>&lt;script id="movieTemplate" type="text/template"&gt;
          &lt;div class="row my-3 t-3 card-movie "&gt;
              &lt;div class="col-md-12 mb-4"&gt;
                  &lt;div class="card border-0 shadow"&gt;
                      &lt;img src="https://i.pravatar.cc/400?img=48" class="card-img-top" alt="..."&gt;
                      &lt;div class="card-body text-center"&gt;
                          &lt;h5 class="card-title mb-0"&gt;Title in Template&lt;/h5&gt;
                          &lt;div class="card-genre text-black-50"&gt;Genre in Template&lt;/div&gt;
                          &lt;div class="card-year text-black-50"&gt;Year in Template&lt;/div&gt;
                          &lt;button type="button" class="btn btn-danger deleteMovie mt-2"&gt;Delete&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>and this is the function calling that button</p>
  
  <pre><code>function wireHandlers() {
              $(".deleteMovie").on("click", onDeleteMovie);
          };
  </code></pre>
  
  <p>and finally the function that should delete the template</p>
  
  <pre><code>function onDeleteMovie() {
  
              $(".card-movie").remove();
          };
  </code></pre>
  
  <p>I know there is probably a shorthand way to do this but I would really like to keep it as simple as possible. Any help is appriciated! :D </p>