0

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

    })   

})
Brownies
  • 1
  • 1

1 Answers1

0
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 ! :)

Brownies
  • 1
  • 1
  • Yes, the problem was that you were nesting the new element inside the one that got clicked. So once the inner elements were clicked the parent would get the click too and would re-add the elements. So, your code was removing them, but was re-adding them right away. – Gabriele Petrioli Feb 06 '22 at 16:25