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

Question

在上一个问题中，有人将我置于“rangy”http://code.google.com/p/范围广泛/。即使我不完全理解它，这也很有趣。我不是 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. Turn " sel" 转换为字符串变量 var txt = sel.toString();
3. 删除内容 - 包括 a 元素 range.deleteContents(); 然后
4. 将删除的内容替换为“文本”版本 var ReplaceText = document.createTextNode(txt); sel.appendChild(replaceText);

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

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

Answer 1

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

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('');