在 jQuery 中单击自身内部的元素时，删除动态生成的元素？

Question

How can I remove a dynamically generated block of elements when clicking the button inside of it?

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

use normal function and also use dynamic click listener so you don't need to create a new event lister every time.

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

Answer 2

FIRST: you should use $(document).on("click", target, function(){...} for dynamically generated elements

SECOND: As simple as parent()

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

EXAMPLE:

 $(".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>