JavaScript：如何从节点中删除标签？

Question

在上一个问题中，有人将我置于“rangy”http://code.google.com/p/rangy/。即使我不完全理解它也很有趣。我不是 JavaScript 人。但是，我已经设法用它完成了我需要的大多数事情，除了 1。这个概念是一个非常基本的 RTE，只是粗体、斜体等。我做到了，创建了一个链接 - 也做了，好吧可能有花了一个 JS 人 2 分钟花了我几个小时 - 令人沮丧，但我想我正在学习一点 - 非常缓慢。无论如何，使用 rangy 我可以创建（请原谅糟糕的代码）这样​​的 href 链接：

$('#linkbut').live('click',function(){
        var sel = rangy.getSelection();     
        var range = sel.getRangeAt(0); 
        range.splitBoundaries(); 
        var textNodes = range.getNodes([3]); 
            for (var i = 0, len = textNodes.length; i < len; ++i) { 
            var newLink = document.createElement('a');
            newLink.setAttribute('href','test.html');
            var linkText = document.createTextNode(sel);
            var parent = textNodes[i].parentNode;
            parent.insertBefore(newLink,textNodes[i]); 
            newLink.appendChild(linkText);
            range.deleteContents();
            }
    });

#linkbut 是一个简单的 HTML 按钮，上面的实际 href (test.html) 将来自输入字段的值，而不是“硬编码”。但是如果我想删除它，我无法完成的是“删除”链接。

进一步说明：创建链接后，我可能想删除它，所以我尝试了上面代码的“反向” - 显然不好，所以已经“到此为止”：

$('#deletelink').live('click',function(){
                var sel = rangy.getSelection();     
                var range = sel.getRangeAt(0); 
                range.splitBoundaries(); 
                var textNodes = range.getNodes([3]); 
                var txt = sel.toString();
                range.deleteContents();
                var replaceText = document.createTextNode(txt);
                sel.appendChild(replaceText);

            });

我真正想做的（可能不可能）是有一些“通用”函数从上面的节点中删除任何标记元素我想要做的是：

1. 获取范围 - sel = rangy.getSelection();
2. 将“sel”转为字符串变量var txt = sel.toString();
3. 删除内容 - 包括 a 元素 range.deleteContents(); 那么
4. 用“文本”版本替换已删除的 var replaceText = document.createTextNode(txt); sel.appendChild(replaceText);

我“到目前为止”内容已被删除，但我无法让“新文本替换”功能发挥作用。

希望一切都清楚 - 因为这对我来说不是；）

Answer 1

我知道一个老问题，但我遇到了同样的问题并找到了一个可行的解决方案here。

var el = document.getElementsByTagName('span')[0]; // Get the element in question
var pa = el.parentNode;

while(el.firstChild) {
    pa.insertBefore(el.firstChild, el);
}

pa.removeChild(el);
pa.normalize();

编辑： normalize() 方法很重要，这样您就不会有一堆相邻的文本节点。它使所有文本节点再次聚合到一个文本节点中。

对于您的确切问题，您可以遍历所有节点，然后执行上述代码。

Answer 2

您可能应该查看如何在 jQuery 中进行嵌套选择，正如 NeXXeuS 所说，您应该考虑通过 .html() 在您选择的方法上删除内容。

如果你有：

<div id="mydiv"></div>

然后你运行：`

$('#mydiv').append('<a href="test.html">Test Link</a>');

html 将如下所示：

<div id="mydiv"><a href="test.html">Test Link</a></div>

您可以通过以下方式选择链接：

$('#mydiv a');

您可以通过以下方式删除它：

$('#mydiv').html('');