删除html标签但保留内部html

Question

我有一个带有大型菜单的导航菜单。它有几个标记使它成为一个超级菜单。但我想在小视口中删除一些标记。

所以我的标记是

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

我想要什么

i have two mega-menu-wrapper

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

我尝试了什么

 <script type="text/javascript">
  $('.clock').countdown('2015/05/25', function(event) {
   $(this).html(event.strftime('%D días %H:%M:%S'));
 });
 </script>

它在两个每个巨型菜单中生成相同的列表，并且在每个megamenu中，每个元素的重复次数约为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();;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您有多个菜单，请

使用.each()

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

DEMO

Answer 2

使用您当前的标记，您可以使用JPA Criteria api with CONTAINS function，其中将li带有锚点，并将其作为.megamenu-wrapper的直接子项附加

然后，使用append()删除以前包含空li个孩子的父 ul元素

$('.megamenu-wrapper').append($('li:has(a)'));
$('.megamenu-wrapper').children('li:has(ul)').remove();

<强>更新

对于多个菜单，您可以使用上面的代码段，但将其打包在remove()来电

中

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

$('.megamenu-wrapper').each(function(){
$(this).append($(this).find('li:has(a)'));

$(this).children('li:has(ul)').remove();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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>

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