Удаление динамически генерируемых элементов при нажатии на элемент внутри себя в jQuery?

Question

Как удалить динамически генерируемый блок элементов при нажатии на кнопку внутри него?

function controlContent(target, trigger) {
    //this will add a new div to target which is an existing html element
    $(trigger).on("click", () => {
        $(target).append(`
            <div class="dynamic-container">
                <button class="remove-btn">Remove the div I am inside</button>
            </div>
        `)
    }

    //this should remove the div that was added when I click the remove button
    $(target).on("click", ".remove-btn", () => {
        $(this).closest(".dynamic-container").remove();
    }
}

Answer 1

FIRST: вы должны использовать $(document).on("click", target, function(){...} для динамически генерируемых элементов

SECOND: Просто, как parent()

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

ПРИМЕР:

$(".button1").on("click", function(){
$(".generatedbuttons").append('<div class="green"><button class="button2">Click me to remove me and my parent</button></div>');
});
$(document).on("click", ".button2", function(){
  $(this).parent().remove();
});

.button1 {
display:block;
float: left;
}
.green {
padding: 10px;
background-color: green;
display: block;
float: left;
clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button1">Click me to generate buttons</button>

<div class="generatedbuttons">
</div>

Answer 2

используйте обычную функцию, а также динамический прослушиватель кликов, поэтому вам не нужно каждый раз создавать новый список событий.

$(document).on('click', '.remove-btn', function(){
    $(this).closest(".dynamic-container").remove();
})