CODEWITHSUNDEEP
jqueryhtmlreplace
kiarashi
kiarashi

Reputation: 493

Remove tags inside nested content

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" )){
        ...
    }

Upvotes: 1

Views: 470

Answers (4)

iSR5
iSR5

Reputation: 3498

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.

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 1

Adrianopolis
Adrianopolis

Reputation: 1292

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("");

Upvotes: 0

Jeremy Carlson
Jeremy Carlson

Reputation: 1273

I think you could take a couple approaches here:

  1. Clone the inner HTML content first, then replace the entire node you'd like to remove with that clone.
  2. 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!

Upvotes: 0

Related Questions