如何移除元素内的span？

Question

如何移除元素内的span？

3

以下代码向菜单 (.active) 添加和删除 "active" 类。它还为活动链接添加了一个 span 类 。

如何删除这个 span 类？我尝试了 unwrap 但它并没有删除 span 类。

以下是我的代码：

$("#menu a").click(function() {
  $("#menu a").each(function() {
    $(this).removeClass("active");

    //Don't work :
    //$(this).unwrap('<span class="filet_menu"></span>');
    //$(this).contents().unwrap();
    //$('(this) > .active').unwrap();
  });
  $(this).addClass("active");
  $(this).wrapInner('<span class="filet_menu"></span>');
});

.active {
  color: #32c0ce !important;
}

.filet_menu {
  border-bottom: 2px solid #32c0ce;
  padding-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="header">
    <div id="contenu_header">
      <h1>Sébastien Gicquel</h1>
      <ul id="menu">
        <li><a id="bt_diaporama" href="#diaporama">Home</a></li>
        <li><a id="bt_presentation" href="#presentation">Présentation</a></li>
        <li><a id="bt_realisations" href="#realisations">Réalisations</a></li>
        <li><a id="bt_contact" href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- fin contenu_header -->
  </div>
  <!-- fin header -->
  <div id="page">

- Sébastien Gicquel

HTML长什么样子？ - Anton

你想要删除元素span还是类名？ - Arooran

我已经用HTML代码编辑了问题。我想要删除，但我认为如果我只删除class filet_menu，它可能会起作用。 - Sébastien Gicquel

4个回答

2

我相信您想要删除标签，但保留标签内的数据，因此 .remove() 方法不适用于您。您可以使用以下方法：

$(this).html(
    $(this).find("span.filet_menu").html()
);

- user59169

1

改进您的代码的几个建议：

不要添加和删除，而是在加载时为每个项目创建一个。每次修改DOM时，浏览器都必须执行昂贵的布局计算。您可以通过CSS控制其显示，具体取决于其父级active类。
您不需要迭代每个菜单项以删除active类，只需使用选择器即可。

JavaScript：

$("#menu a").each(function() {
    $(this).wrapInner('<span class="filet_menu"></span>');
    $(this).click(function() {
        $('#menu a.active').removeClass('active');
        $(this).addClass('active');
    });
});

CSS：

.active
{
    color:#32c0ce !important;
}

.active .filet_menu
{
    border-bottom: 2px solid #32c0ce;
    padding-bottom:2px;
}

- roryf

好的建议。我不需要添加或删除span。 - Sébastien Gicquel

1

$(".filet_menu", this).each(function () {
   $(this).replaceWith(this.childNodes);
});

http://jsfiddle.net/LMm28/

另一方面，可能更容易只是让span一直存在，并添加/删除.filet_menu类。

- Explosion Pills

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wirey00 · Accepted Answer

你需要先获取内容以进行解包。而且不需要使用每个循环。

$("#menu a").click(function() {         
     $("#menu a.active").removeClass("active");
     $(this).addClass("active");
     $('span.filet_menu').contents().unwrap();// get previous span contents first and unwrap
     $(this).wrapInner('<span class="filet_menu"></span>');// this wraps current anchor's contents  
 });

http://jsfiddle.net/syXnH/

或者你真的需要这个span标签吗？为什么不直接添加/删除类名呢？

$("#menu a").click(function() {
    $("#menu a.active").removeClass("active filet_menu");
    $(this).addClass('filet_menu active');
});

http://jsfiddle.net/HwTNz/