Question

我使用拆分和连接功能动态生成以下标记

<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标记。得到这样的东西：

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

我认为我可以使用unwrap，但它不起作用：

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

你可以尝试

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

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

正如其他人所建议的那样，从页面中删除多余的html是非常理想的，因此它永远不会传递给客户端，但这应该适用于您的情况：

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

修改：Working example

jQuery删除标签到自定义元素

5 个答案: