JQuery удалить тег для пользовательского элемента

Question

У меня есть следующая разметка, сгенерированная динамически с помощью функции split и join

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

Я хочу удалить тег em для элементов, для которых класс «good» не включен. Получите что-то вроде этого:

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

Я подумал, что могу использовать для этого распаковку, но она не работает:

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

Что я должен сделать, чтобы это работало? Спасибо

Answer 1

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

Должно быть так просто.

Answer 2

Это:

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

Если вам нужно предотвратить пробелы между любыми полученными элементами, не ставьте пробелы между ними в исходном HTML.

Answer 3

Как предлагали другие, было бы идеально удалить лишний html со страницы, чтобы он никогда не передавался клиенту, но это должно работать в вашей ситуации:

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

Редактировать: Рабочий пример

Answer 4

В jQuery 1.4 появилась функция unwrap () (как вы упомянули) - есть ли у вас проблемы с добавлением тега?:

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

Результат:

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

Answer 5

вы можете попробовать

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