Remove tags inside nested content

Question

Looking for a way to remove a bit of html code if content is inside a li tag with the class has-megamenu

My code is as follows:

<ul class="uk-navbar-nav">
<li class="has-megamenu"><a href="#" aria-expanded="false" class="">Products</a>

<div class="navbar-dropdown uk-dropdown" uk-dropdown="offset:0;delay-hide:100;" style="...">
    <ul class="uk-navbar-dropdown-nav>

        <div class="navbar-dropdown-grid uk-grid">
            <div class="uk-width-1-3">
                <ul class="navbar-dropdown">
                    <li><a href="#">Icons</a></li>
                    <li><a href="#">Illustration</a></li>
                </ul>
            </div>
        </div>

    </ul>
</div>

</li>
</ul>

What I wish to remove (with jquery) is this part of code (along with the closing div/ul tag. All content within these html tags should remain and not be removed/replaced.

<div class="navbar-dropdown uk-dropdown" uk-dropdown="offset:0;delay-hide:100;" style="...">
        <ul class="uk-navbar-dropdown-nav>

Can anyone put me on the right track?

if( $( "uk-navbar-nav" ).has( ".has-megamenu" )){
        ...
    }

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Just use jquery `.unwrap()` twice to remove the parent and grandparent.

.unwrap()

Description: Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

REF: https://api.jquery.com/unwrap/

if ($("uk-navbar-nav").has(".has-megamenu")) {
  $('.uk-navbar-dropdown-nav > .navbar-dropdown-grid').unwrap().unwrap();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="uk-navbar-nav">
  <li class="has-megamenu"><a href="#" aria-expanded="false" class="">Products</a>
    <div class="navbar-dropdown uk-dropdown" uk-dropdown="offset:0;delay-hide:100;" style="...">
      <ul class="uk-navbar-dropdown-nav">
      
        <div class=" navbar-dropdown-grid uk-grid">
          <div class="uk-width-1-3 ">
            <ul class="navbar-dropdown ">
              <li><a href="#">Icons</a></li>
              <li><a href="# ">Illustration</a></li>
            </ul>
          </div>
          
        </div>
      </ul>
    </div>
  </li>
</ul>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 26, 2017 at 23:37

Dalin Huang

11.3k5 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kiarashi Over a year ago

Thank you! The wrap/unwrap is what I was looking for. :)

Dalin Huang Over a year ago

@kiarashi glad to help =D

Jeremy Carlson · Accepted Answer · 2017-05-26 23:33:05Z

0

I think you could take a couple approaches here:

Clone the inner HTML content first, then replace the entire node you'd like to remove with that clone.
Target the elements you wish to remove, and just remove all attributes on those elements. Not sure if that will accomplish what you want.

To do the first, you'd need to find all children of the UL.uk-navbar-dropdown-nav, something like

var myContent = $('.uk-navbar-nav .has-megamenu .uk-navbar-dropdown-nav').html();

Then you'd replace the entire node w/ that content:

$('.has-megamenu .navbar-dropdown').replaceWith(myContent);

That should point you in the right direction!

answered May 26, 2017 at 23:33

Jeremy Carlson

1,27313 silver badges20 bronze badges

Comments

Adrianopolis · Accepted Answer · 2017-05-26 23:33:22Z

0

You can use .html() in jQuery I may have misunderstood the task. If you were wanting to store the innerHTML before you removed it. But I understood that you want to remove the innerHTML and keep the parent tag with its attributes.

$(".has-megamenu .uk-navbar-nav").html("");

answered May 26, 2017 at 23:33

Adrianopolis

1,2921 gold badge11 silver badges15 bronze badges

Comments

iSR5 · Accepted Answer · 2017-05-27 00:07:08Z

0

If I understand correctly, you want to hide an element along with its content, which is in your case <li> list. Since it has a class , then the easiest way to do it is to use CSS. Just type :

.has-megamenu {
    display: none;
}

This will hide the <li> along with its content from the view, so the content will be hidden. Then, you can show it again either by a CSS or JS.

You can also use jQuery show() hide(), or just simply use CSS @media queries to specify the screen width that will show or hide the content on it.

answered May 27, 2017 at 0:07

iSR5

3,5492 gold badges16 silver badges15 bronze badges

Collectives™ on Stack Overflow

Remove tags inside nested content

4 Answers 4

Just use jquery `.unwrap()` twice to remove the parent and grandparent.

.unwrap()

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Just use jquery .unwrap() twice to remove the parent and grandparent.

.unwrap()

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Just use jquery `.unwrap()` twice to remove the parent and grandparent.