JQuery, манипулируют динамически созданный элемент обратного вызова нажатием на него

Question

У меня есть мобильный меню с помощью этого (упрощенный) 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> 

Я создаю вспомогательный элемент для закрытия подменю в мобильных устройствах. создать его в функцию, например:

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

элемент Я говорю это о span.closesubmenu

Затем, кликните на него, я хочу, чтобы удалить класс к его родительский элемент, а затем удалить элемент .closesubmenu.

Это, как я стараюсь:

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

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

    }); 

Это не имеет значения, манипуляции которым я пытаюсь в функции обратного вызова для closesubmenu. не работает.

Он работает только только так:

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

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

    }); 

Кроме того, если я просто положить 2 манипуляциями на 2 линии, только первый из них работает:

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 

    }); 

Что я здесь отсутствует?

UPDATE:

Я попытался также, как предложено в ответах, чтобы сохранить элемент в вар использовать в функции обратного вызова, например:

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

Но это не работает.

UPDATE 2: jsFiddle

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

UPDATE 3: Спасибо Давиду (выбранный ответ), это правильно и работает скрипку: https://jsfiddle.net/bluantinoo/yr4gdjdz/6/

Answer 1

Что все эти параметры вы Переходите к .removeClass()?

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

It's only expecting the class name(s). И это не асинхронная операция с обратным вызовом. Просто удалите класс (ы), а затем удалить элемент:

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

Example.