jQuery remove tag to custom element

Question

I have the following markup generated dynamically with a split and join function

<span>
    <em style="position: relative;">T</em>
    <em class="good" style="position: relative;">H</em>
    <em style="position: relative;">E</em>
    <em style="position: relative;">S</em>
</span>

I want to remove the em tag for the elements that do not have class "good" on. Get something like this:

<span>
    T <em class="good" style="position: relative;">H</em> ES
</span>

I figured that I can use the unwrap for this but it does not work:

$(document).ready(function(){
$("#njoin").live('click', function(){
$('em').each(function() {
    if ($(this).hasClass('good')) {
         $('.good').unwrap();
    }
});         
});
});

What should I do to make it work? Thank you

Answer 1

$('em').each(function(){
if(!$(this).hasClass('good'))
   $(this).remove();
});

Should be as simple as that.

Answer 2

you can try

$('#njoin').click(function() {
    $('em').each(function() {
        if($(this:not).hasClass('good')) {
            $('.good').remove();
        }
    });
});

Answer 3

jQuery 1.4 introduced the unwrap() function (as you mentioned) - do you have an issue with adding a tag?:

$('em:not(".good")')
  .each(function() { this.innerHTML = '<span>' + this.innerHTML + '</span>'; })
  .find('span').each(function() { $(this).unwrap(); });

Result:

<span><span>T</span> <em class="good" style="position: relative;">H</em> <span>E</span><span>S</span></span>

Answer 4

This:

$('em:not(.good)').replaceWith(function(){
    return document.createTextNode($(this).text());
});

If you need to prevent spaces between any of the resulting elements, don't put spaces between them in your original HTML.

Answer 5

As others have suggested, it would really be ideal to remove the excess html from the page so it is never passed to the client, but this should work for your situation:

$("#njoin").live('click', function(){
    $('em').each(function(){ 
        if(!$(this).hasClass('good')) 
        {
            this.outerHTML = $(this).html();
        }
    });
});

Edit: Working example