He intentado un par de cosas desde ayer, pero no puedo lograr mi objetivo.
La idea es:
Al hacer clic en un carácter "Div", aparece un pequeño menú para cambiar un parámetro dentro de mi sitio web. El problema es que quiero eliminar el "Selector de clases", pero simplemente no funciona.
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') })Descubrí que tenía que agregar event.stopPropagation()
¡Ahora funciona bien! :)