Question

假设我的HTML看起来像这样

<p>a<span>b</span>c</p>

后

$("span").remove();

我的HTML看起来像这样

<p>
"a"
"c"
</p>

如何将这两个部分合并在一起，因此我的HTML看起来像<p>ac</p>？

jsfiddle

Answer 1

$("span").remove();
$("p").html($("p").html());

结果：

<p>ac</p>

Answer 2

这是一个，它只影响连接任意两个连续的文本节点。

$("span").click(function() {
    var parent = this.parentNode;
    $(this).remove();
    normalize(parent);
});
function normalize(element){
    var contents = $(element).contents();
    contents.each(function(i){console.log(this.nodeType);
        if (this.nodeType == 3 && i > 0){
            var prev = contents[i-1];
            if (prev.nodeType == 3){
                this.nodeValue += prev.nodeValue;
                prev.parentNode.removeChild(prev);
            }
        }
    });
}

http://jsfiddle.net/mowglisanu/dgBwc/13/

Answer 3

var p  = $('p'),
    p2 = p.clone(true);
    p2.find('span').remove();
    p2.text(p2.text());
    p.parent().empty().append(p2);

FIDDLE

保持绑定！

Answer 4

我知道这是旧的，但这是Node.normalize的用途：

$('p').get(0).normalize()

Node.normalize（）方法将指定节点及其所有子树置于“规范化”形式。在规范化的子树中，子树中没有文本节点为空，并且没有相邻的文本节点。

JQuery - 删除中间元素后合并

4 个答案: