jQuery .remove() does not work with div created inside the function

I've tried a couple of things since yesterday, but I can't achieve my goal.

The idea is :

When clicking on a character "Div", it appears a little menu to change a parameter inside my website. The problem is, I want to remove the "Class Picker", but it just does not work.

var CharacterClasses = [
    { id: 1, name: 'Warrior', cssClass: 'warrior'},
    { id: 2, name: 'Paladin', cssClass: 'paladin'},
    ...
]

$('.group_miniature').click( function(){

    // Removing all existant class choices
    $(".group-panel_class_picker").remove()

    // Creating the class picker
    var Panel = $("<div id=\"panel_class_picker\"></div>").addClass('group-panel_class_picker')

    // Append the whole thing
    $(this).append(Panel)

    // Iterating each class to add a div
    CharacterClasses.forEach( function(item){

        // Creating the div
        let btn_class = $("<div>&nbsp</div>").addClass( [item.cssClass,'group-btn_class'] )

        Panel.append(btn_class)

        Panel.on("click", ".group-btn_class", function(event){
            $(this).parent().remove() // This is my problem, it does not remove the parent
            console.log('Click :)') // This appears in my console
        })

    })   

})

Panel.on("click", ".group-btn_class", function(event){
            $(this).parent().hide()
            event.stopPropagation()
            console.log('Click criss')
        })

I discovered that I had to add event.stopPropagation()

Now it works just fine ! :)