jQuery/JavaScript: how to remove all elements in the first <li> except <a>text</a>

Question

I have a nested list.

<ul id="menu-main-menu" class="nav sn-nav">
   <li id="menu-item-38" class="menu-item menu-item-type-yawp_wim menu-item-object-yawp_wim menu-item-38">              
      <div class="yawp_wim_wrap">
         <div class="widget-area">
            <div id="custommetawidget-3" class="yawp_wim_widget customMetaWidget">  
               <span class="yawp_wim_title"></span> 
               <ul>
                  <li><a href="1">Site Admin</a></li>
                  <li><a href="2">Log out</a></li>
               </ul>
            </div>
         </div>
       </div>
    </li>
    <li>
       <a href="3">test</a>
    </li>
</ul>

I want to remove all elements of first <li id='menu-item-38'> but leave <a> .
Just like the second <li> .
I found a similar link: http://jsfiddle.net/yJrb7/1/
But it keep not working.

var li = document.getElementsByClassName('menu-item')[0];
var links = document.getElementsByTagName('a');
for(var i=0;i<li.childNodes.length;i++){
  if(li.childNodes[i].nodeName!=links)
    li.removeChild(li.childNodes[i--]);
}

EDIT:
Hey guys, sorry my fault, I didn't make clear.
What I need actually is

<ul id="menu-main-menu" class="nav sn-nav">
  <li><a href="1">Site Admin</a></li>
  <li><a href="2">Log out</a></li>
  <li><a href="3">test</a></li>
</ul>

Answer 1

window.onload = function() {
    //declare an instance of DocumentFragment Type;
    var fragment = document.createDocumentFragment();
    var liList = document.getElementById("menu-item-38").querySelectorAll("li");
    for (var i = 0; i < liList.length; i++) {
        //copy these li into the fragment
        fragment.appendChild(liList[i]);
    }
    var removeObj = document.getElementById("menu-item-38");
    var parentElement = removeObj.parentNode;
    //remove li whose id id [menu-item-38]
    parentElement.removeChild(removeObj);
    //add fragment to the parmentElement
    parentElement.appendChild(fragment);
}

Answer 2

// Selecting the root element
var $li = $('#menu-item-38');
// holding the reference to the elements that you want to keep
var $a = $li.find('a');
// now removing all elements except 'a' elements
$li.find('*:not(a)').remove();
// reattaching them to the root element
$li.append($a);

Hope this helps

Answer 3

Pure JavaScript solution: https://jsfiddle.net/xkchx2f5/

var item=document.getElementById('menu-item-38');

var list_a=document.getElementsByTagName('a');
var tmp=document.createElement('div');
for(var i=0;i<list_a.length;i++){
    tmp.appendChild(list_a[i].cloneNode(true));
}
item.innerHTML=tmp.innerHTML;

Answer 4

If I'm understanding the question right, couldn't you just set the outerHTML to whatever you want like this?

const menu = document.getElementById('menu-main-menu');
const links = menu.querySelectorAll('a');

const items = (x, i) => { 
    const li = document.createElement('li');
    li.innerHTML = links[i].outerHTML;
    return li;
};

const list = Array.from(links).map(items);
menu.innerHTML = list.map(x => x.outerHTML).join('');

Answer 5

You can use following jQuery code. Just take all a element in a variable and then remove inner html of li tag and the append a tag back to li

$(function(){
               var allAtags = $('#menu-item-38 a');
               $("#menu-item-38").html("");
               allAtags.each(function(){
                    $("#menu-item-38").append(this);
               })
            });

I hope it will help

Answer 6

You can use jQuery unwrap() method for this. The only thing you have to do is give a similar class to all the first direct child of the li, that you want to remove, and pass that class to the unwrap method. This will remove all the li from the element that have that similar class.

$('.yawp_wim_wrap').unwrap();

this will remove the li from its parent. Similiarly you have to add same class to other elements of the other li's that you want to remove.