How to remove span inside an element?

css, javascript, jquery, unwrap, wrapper

Solution

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/

Problem

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

Original source