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