jQuery, élément créé dynamiquement manipuler en rappel d'un clic sur ce

Question

J'ai un menu mobile avec ce (simplifié) html

<ul id="mobile_menu"> 
    <li class="menu-item menu-item-has-children"> 
     <a href="#">Menu with Submenu</a> 
     <ul class="sub-menu"> 
      <li class="menu-item"><a href="#">Submenu item 1</a></li> 
      <li class="menu-item"><a href="#">Submenu item 2</a></li> 
      <li class="menu-item enu-item-has-children"><a href="#">Submenu item 3</a> 
       <ul class="sub-menu"> 
        <li class="menu-item"><a href="#">Sub-Submenu item 1</a></li> 
        <li class="menu-item"><a href="#">Sub-Submenu item 2</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="menu-item"><a href="#">menu item 2</a></li> 
    <li class="menu-item"><a href="#">menu item 3</a></li> 
</ul> 

Je crée un élément d'aide pour fermer les sous-menus dans les appareils mobiles. Je crée en fonction, comme ceci:

var mainli_a = jQuery('#mobile_menu .menu-item-has-children > a'); 

mainli_a.on('touchstart click', function(e){ 

        "use strict"; 
        var link = jQuery(this); 
        if (link.parent().hasClass('active')) { 
         return true; 
        } else { 
         link.parent().addClass('active') 
         link.parent().append('<span class="closesubmenu"> </span>'); // here I create the element 

         e.preventDefault(); 
         return false; 
        } 
       }); 

L'élément dont je parle est le span.closesubmenu

Ensuite, un clic dessus, je veux supprimer une classe à sa élément parent, puis supprimez l'élément .closesubmenu lui-même.

Voilà comment j'essaie:

jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){ 

      jQuery(this).parent().removeClass('active', 0, 'linear', function(){ 
       jQuery(this).remove(); // this does not work 
      }); 

    }); 

Peu importe la manipulation de Wich j'essaie dans le rappel à closesubmenu. cela ne fonctionne pas.

Il fonctionne seulement que comme ceci:

jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){ 

     jQuery(this).remove(); // this works  

    }); 

De plus, si je viens de mettre 2 manipulations sur 2 lignes, seul le premier fonctionne:

jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){ 

     jQuery(this).remove(); // this works 
     jQuery(this).parent().removeClass('active'); // this does not work 

    }); 

jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){ 

     jQuery(this).parent().removeClass('active'); // this works 
     jQuery(this).remove(); // this does not work 

    }); 

Qu'est-ce que je manque ici?

MISE À JOUR:

J'ai essayé aussi comme suggéré dans les réponses, pour stocker l'élément dans un var à utiliser dans la fonction de rappel, comme ceci:

  jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){ 
       var self = this; 
       jQuery(self).parent().removeClass('active', 0, 'linear', function(){ 
        jQuery(self).remove(); 
       }); 
     }); 

Mais il ne fonctionne pas.

MISE À JOUR 2: jsFiddle

https://jsfiddle.net/bluantinoo/yr4gdjdz/3/

MISE À JOUR 3: Merci à David (réponse choisie) ceci est le violon correct et travail: https://jsfiddle.net/bluantinoo/yr4gdjdz/6/

Answer 1

Qu'est-ce que tous ces paramètres passe au .removeClass()?

jQuery(this).parent().removeClass('active', 0, 'linear', function(){ 
    jQuery(this).remove(); 
}); 

It's only expecting the class name(s). Et ce n'est pas une opération asynchrone avec un rappel. Il suffit de retirer la classe (s), puis retirez l'élément:

jQuery(this).parent().removeClass('active'); 
jQuery(this).remove(); 

Example.