CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Musa Muaz
Musa Muaz

Reputation: 714

removing html tags but keep the inner html

I have a nav menu which have a mega menu.It has several markup to make it a mega menu.But i want to remove some of the markups when in small viewport.

So my markups are

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

what i want

<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

What i have tried

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

It makes a same list in two each mega menu and in each megamenu there is about 5 times repetation of each elements. Anyone please help.

Upvotes: 1

Views: 99

Answers (2)

AmmarCSE
AmmarCSE

Reputation: 30557

With your current markup, you can use append() which will take the children li with anchors and append them as direct children of .megamenu-wrapper

Then, use remove() to remove the former parent li elements which now contain empty ul children

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

Update

For multiple menus, you can use the snippet above, but wrap it in an each() call

$('.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>

Upvotes: 0

Satpal
Satpal

Reputation: 133403

Use

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

use .each() if you have multiple menus

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

DEMO

Upvotes: 1

Related Questions