функция удаления / удаления шаблона из DOM

Question

Я работал над этим в течение нескольких часов, и я не могу понять это.

Я пытаюсь заставить эту функцию удалить шаблон при нажатии кнопки

здесь html шаблона.

<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>

, и это функция, вызывающая эту кнопку

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

и, наконец, функция, которая должна удалить шаблон

function onDeleteMovie() {

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

Я знаю, что, вероятно, существует краткий способ сделать это, но мне бы очень хотелось, чтобы это было как можно проще. Любая помощь ценится! : D

Answer 1

Вы не прикрепили событие, потому что вы не выполнили wireHandlers()

Ваш селектор class был неправильным .delete-movie

Вы должны прикрепить событие, когда документ загружается. Более простой способ сделать это:

$(document).on("click",".deleteMovie", function(){
    $(this).parent().parent().parent().parent().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Это лучший способ динамического добавления данных:

$(this).parent().parent().parent().parent().remove();

Answer 2

Вы можете вызвать click прямо на кнопке:

$( ".deleteMovie" ).click(function() {
  $(".card-movie").remove();
});

Этот метод является ярлыком для .on( "click", handler )

Документация для этого же здесь