javascript - 删除 html 标签但保留内部 html

Question

我有一个导航菜单，它有一个大型菜单。它有几个标记使其成为一个大型菜单。但是我想在小视口(viewport)中删除一些标记。

所以我的标记是

<ul class="megamenu-wrapper">
 <li>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Abort</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
 </li>
 <li> 
    <ul>   
        <li><a href="#">gang</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">food</a></li>
    </ul>
 </li>
</ul>

我想要什么

<ul class="megamenu-wrapper">

        <li><a href="#">Home</a></li>
        <li><a href="#">Abort</a></li>
        <li><a href="#">Contact</a></li>

        <li><a href="#">gang</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">food</a></li>

</ul>

我有两个大型菜单包装器

我尝试过的

var megaContents = $('.megamenu-wrapper li ul').contents();
    $('.megamenu-wrapper li ul').replaceWith( megaContents );

它在两个每个大型菜单中制作相同的列表，并且在每个大型菜单中每个元素重复大约​​ 5 次。 任何人都请帮助。

Answer 1

使用

//Fimd child ul li and append it to main ul
$('.megamenu-wrapper > li > ul > li').appendTo('.megamenu-wrapper');

//Remove li having ul
$('.megamenu-wrapper > li:has(ul)').remove();;

$(document).ready(function() {
      $('.megamenu-wrapper > li > ul > li').appendTo('.megamenu-wrapper'); +
      $('.megamenu-wrapper > li:has(ul)').remove();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="megamenu-wrapper">
  <li>
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Abort</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </li>
  <li>
    <ul>
      <li><a href="#">gang</a>
      </li>
      <li><a href="#">menu</a>
      </li>
      <li><a href="#">food</a>
      </li>
    </ul>
  </li>
</ul>

如果您有多个菜单，请使用 .each()

$('.megamenu-wrapper') each(function () {
    $(this).find('> li > ul > li').appendTo(this);
    $(this).find(' > li:has(ul)').remove();
});

DEMO