How to remove span inside an element?

Question

The following code adds and removes an "active" class to a menu (.active) It also adds a span class to the active link <span class="filet_menu"></span>.

How can I remove this span class? I've tried unwrap but it doesn't remove the span class "unwrap".

Here is my code:

$("#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">

I've edited the question with html code. I want to remove span class="filet_menu"> but i think it could work if i only remove the class filet_menu — Sébastien Gicquel, Dec 07 '12 at 15:48

wirey00 · Accepted Answer · 2012-12-07T16:16:02.317

3

You need to get to the contents first to unwrap. And you don't need the each loop

$("#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/

Or do you really need the span? why not just add/remove the classes

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

http://jsfiddle.net/HwTNz/

edited Dec 07 '12 at 16:16

answered Dec 07 '12 at 16:00

wirey00

33,517
7
54
65

Really nice solution without the span. But i think i need the span because i want to have a line under the link and in this case the line is longer than the link : http://jsfiddle.net/Vinyl/8TMgD/ – Sébastien Gicquel Dec 07 '12 at 16:37
@SébastienGicquel the line is still there http://jsfiddle.net/n9Vyz/ It's just your css was different than mines – wirey00 Dec 07 '12 at 16:48
Yes, we see on the fiddle that the line is greater in width. By the way, it was a nice solution. See what i've done : http://jsfiddle.net/Vinyl/h9Ldx/ – Sébastien Gicquel Dec 07 '12 at 17:01
@SébastienGicquel nice, also you don't need an each loop to bind the click events. http://jsfiddle.net/sDRc3/ – wirey00 Dec 07 '12 at 17:04

user59169 · Answer 2 · 2012-12-07T15:56:29.457

2

I believe you want to remove the span, but preserve the data inside the span, so the .remove() won't work for you. You can just use this:

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

edited Dec 07 '12 at 15:56

answered Dec 07 '12 at 15:48

user59169

138
7

score 1 · Answer 3 · answered Dec 07 '12 at 16:06

Couple of suggestions for improving your code:

Rather than adding and removing the <span>, create it once for each item at load time. Each time you modify the DOM the browser has to perform expensive layout calculations. You can the control it's display via CSS, depending on it's parent active class.
You don't need to iterate every menu item to remove the active class, just use a selector

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

Nice suggestions. I don't need to add or remove the span. – Sébastien Gicquel Dec 07 '12 at 16:40 — Sébastien Gicquel, Dec 07 '12 at 16:40

score 1 · Answer 4 · answered Dec 07 '12 at 16:07

1

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

http://jsfiddle.net/LMm28/

On the other hand it may be easier to just have the span there the whole time and just add/remove the .filet_menu class.

answered Dec 07 '12 at 16:07

Explosion Pills

188,624
52
326
405

How to remove span inside an element?

4 Answers4