Convert a jquery string to pure Javascript

// Busco todos os elementos-filhos do seletor. Similar ao .find usado no jQuery
var mobileItems = document.querySelectorAll('#slide-out .nav-mobile .main-menu li.menu-item-has-children');
[].forEach.call(mobileItems, function(el){
   var i = document.createElement('i');
   i.setAttribute('class','mobile-arrows fa fa-chevron-down');
   
   // aqui eu coloquei um texto apenas como exemplo para ser clicado
   // estas duas linhas pode apagar
   var t = document.createTextNode("CLICK ME");
   i.appendChild(t);
   // apagar as duas linhas acima
   
   el.appendChild(i);
});

// Aqui eu percorro os elementos <i> e adiciono um event handler
// similar ao jQuery("li.menu-item-has-children i.mobile-arrows").click(function() {
var li_i = document.querySelectorAll('li.menu-item-has-children i.mobile-arrows');
[].forEach.call(li_i, function(el){
   el.addEventListener('click', function(){
      if(this.className.indexOf('fa-chevron-down') != -1){
         this.classList.remove("fa-chevron-down");
         this.classList.add("fa-chevron-up");
      }else{
         this.classList.remove("fa-chevron-up");
         this.classList.add("fa-chevron-down");
      }
      
      // Aqui eu altero a visibilidade do primeiro <ul> 
      // similar ao jQuery( this ).parent().find('ul:first').toggle();
      var ul = this.parentNode.querySelectorAll('ul')[0];
      ul.style.display = ul.offsetParent === null ? 'block' : 'none';

   });
});

// Aqui eu faço o desembrulho dos elementos indicados no jQuery
var mobileItems = document.querySelectorAll('#slide-out .st-nav-mobile .main-menu *');
var elpai = mobileItems[0].parentNode;
[].forEach.call(mobileItems, function(el){

   // unwrap (desembrulhar). Ao desembrulhar um elemento, todos os irmãos também são,
   // porque o elemento-pai é removido
   elpai.parentNode.appendChild(el);

   var tn = el.nodeName.toLowerCase();
   if(tn == "div" && el.className.indexOf('penci-mega-latest-posts') != -1) el.outerHTML = '';
   if(tn == "div" && el.className.indexOf('mega-cat-content-tab') != -1) el.outerHTML = '';
   if(tn == "div" && el.className.indexOf('mega-recent-post') != -1) el.outerHTML = '';
   
});

// Removendo elemento-pai do for acima
elpai.outerHTML = '';

<div id="slide-out">
   <div class="nav-mobile">
      <div class="main-menu">
         <ul>
            <li class="menu-item-has-children">
               <ul>
                  ul1
               </ul>
               <ul>
                  ul2
               </ul>
            </li>
            <li class="menu-item-has-children">
               <ul>
                  ul1
               </ul>
               <ul>
                  ul2
               </ul>
            </li>
         </ul>
      </div>
   </div>
   <div class="st-nav-mobile">
      <div class="main-menu">
         <div class="penci-mega-latest-posts">
            penci-mega-latest-posts1
         </div>
         <div class="penci-mega-latest-posts">
            penci-mega-latest-posts2
         </div>
         <div class="mega-cat-content-tab">
            mega-cat-content-tab1
         </div>
         <div class="mega-cat-content-tab">
            mega-cat-content-tab2
         </div>
         <div class="mega-recent-post">
            mega-recent-post1
         </div>
         <div class="mega-recent-post">
            mega-recent-post2
         </div>
         <div class="mega-cat-wrapper">
            mega-cat-wrapper1
         </div>
         <div class="mega-cat-wrapper">
            mega-cat-wrapper2
         </div>
         <div class="mega-cat-sub-categories">
            mega-cat-sub-categories1
         </div>
         <div class="mega-cat-sub-categories">
            mega-cat-sub-categories2
         </div>
      </div>
   </div>
</div>