jQuery .remove() 不适用于在函数内部创建的 div

Question

从昨天开始我尝试了一些东西，但我无法实现我的目标。

想法是：

当点击字符“Div”时，会出现一个小菜单来更改我网站内的参数。问题是，我想删除“Class Picker”，但它不起作用。

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

    })   

})

Answer 1

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

我发现我必须添加 event.stopPropagation()

现在一切正常！ :)

jQuery .remove() 不适用于在函数内部创建的 div

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

javascript

jquery

events

parent-node