jQuery/JavaScript:如何删除第一个<李>除了<a>文本</a>

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

本文关键字：gt lt 除了 文本 第一个 JavaScript 何删除 删除 jQuery      更新时间：2023-09-26

我有一个嵌套列表

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

我想删除第一个<li id='menu-item-38'>的所有元素，但保留<a>
就像第二个<li>。
我发现了一个类似的链接：http://jsfiddle.net/yJrb7/1/
但它一直不起作用。

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

编辑：
嘿，伙计们，对不起，我没有说清楚
我实际需要的是

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

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

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

希望这能帮助

纯JavaScript解决方案：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;

您可以使用以下jQuery代码。只需获取变量中的所有元素，然后删除li标签的内部html，并将标签附加回li

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

我希望它能帮助

您可以使用jQuery unwrap((方法来实现这一点。您唯一要做的就是为要删除的li的所有第一个直接子级提供一个类似的类，并将该类传递给unwrap方法。这将从具有类似类的元素中删除所有li。

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

这将从其父项中删除li。类似地，您必须将相同的类添加到要删除的其他li的其他元素中。

如果我理解这个问题，你就不能像这样把outerHTML设置为你想要的任何内容吗？

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('');
相关文章：