CODEWITHSUNDEEP
javascripthtml
Ying Rui Wong
Ying Rui Wong

Reputation: 113

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

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>

Upvotes: 0

Views: 161

Answers (6)

Corey Clark
Corey Clark

Reputation: 116

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('');

Upvotes: 0

Ahmer Khan
Ahmer Khan

Reputation: 767

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.

Upvotes: 0

liumy
liumy

Reputation: 81

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

Upvotes: 1

R.K.Saini
R.K.Saini

Reputation: 2708

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

Upvotes: 0

Newbie
Newbie

Reputation: 287

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;

Upvotes: 0

Naga Srinu Kapusetti
Naga Srinu Kapusetti

Reputation: 1611

// 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

Upvotes: 0

Related Questions