function to remove/delete template from the DOM

I've been working on this for a few hours and I can't seem to figure it out.

I am trying to get this function to remove the template when the button is clicked

here is the html of the template.

<script id="movieTemplate" type="text/template">
        <div class="row my-3 t-3 card-movie ">
            <div class="col-md-12 mb-4">
                <div class="card border-0 shadow">
                    <img src="https://i.pravatar.cc/400?img=48" class="card-img-top" alt="...">
                    <div class="card-body text-center">
                        <h5 class="card-title mb-0">Title in Template</h5>
                        <div class="card-genre text-black-50">Genre in Template</div>
                        <div class="card-year text-black-50">Year in Template</div>
                        <button type="button" class="btn btn-danger deleteMovie mt-2">Delete</button>
                    </div>
                </div>
            </div>
        </div>

and this is the function calling that button

function wireHandlers() {
            $(".deleteMovie").on("click", onDeleteMovie);
        };

and finally the function that should delete the template

function onDeleteMovie() {

            $(".card-movie").remove();
        };

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