删除嵌套内容中的标签

Question

如果内容位于包含has-megamenu类的li标记内，则寻找一种删除一些html代码的方法

我的代码如下：

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

我希望删除的内容（使用jquery）是代码的这一部分（以及结束div / ul标记。这些html标记中的所有内容都应该保留，不会被删除/替换。

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

有人能让我走上正轨吗？

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

Answer 1

只需使用jquery .unwrap()两次即可删除父母和祖父母。

  

.unwrap（）

     

描述：从DOM中删除匹配元素集的父节点，将匹配的元素留在原位。

     

参考：https://api.jquery.com/unwrap/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为你可以采取一些方法：

1. 首先克隆内部HTML内容，然后替换您要删除该克隆的整个节点。
2. 定位您要删除的元素，然后删除这些元素的所有属性。不确定这是否能达到你想要的效果。

要做第一个，你需要找到UL.uk-navbar-dropdown-nav的所有孩子，比如

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

然后你用这个内容替换整个节点：

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

这应该指向正确的方向！

Answer 3

您可以在jQuery中使用.html（） 我可能误解了这个任务。如果您想在删除之前存储innerHTML。但我知道您要删除innerHTML并保留父标记的属性。

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

Answer 4

如果我理解正确， 您希望隐藏元素及其内容，这在您的案例<li>列表中。 因为它有一个类，所以最简单的方法是使用CSS。 只需输入：

.has-megamenu {
    display: none;
}

这会隐藏<li>及其内容，因此内容将被隐藏。然后，您可以通过CSS或JS再次显示它。

您还可以使用jQuery show() hide()，或者只是使用CSS @media查询来指定将在其上显示或隐藏内容的屏幕宽度。