javascript - HTML如何删除标签而不是内容

Question

如何使用 javascript html 标签（例如 span）而不是内容和内容中的 html 标签删除？一个例子：

<div id="content">
    <span id=1 class="note" >
        <p>   <span id=1 class="note" >hello! its one example  </span> </p>
        <li>  <span id=1 class="note" >yes,one example  </span> </li>
    </span> 
</div>

结果应该是：

<div id="content">
    <p> hello! its one example</p><li>yes,one example</li>
</div>

Answer 1

由于您没有提到您需要 JQuery，以下是我建议的代码：

http://jsfiddle.net/9qgK7/

相关代码：

span.outerHTML = span.innerHTML;

参考：https
://developer.mozilla.org/en-US/docs/DOM/element.outerHTML PS：FirefoxouterHTML从 v11 开始支持，但我们已经在使用 v15 :)

Answer 2

在您的特定示例中，仅覆盖直接的parentNode可能是最佳实践。

var content  = document.getElementById('content'),
    span     = content.getElementsByTagName('span')[0],
    p        = content.getElementsByTagName('p')[0];

content.innerHTML = span.innerHTML;

Answer 3

如果你可以使用 jQuery，试试这样的

var newContent = $("#content span").html();
$("#content").html(newContent);

编辑

纯JS解决方案

var spans = document.getElementById("content").getElementsByClassName("note");
var out = "";

for (var i = spans.length - 1; i >= 0; i--) {
  out += spans[i].innerHTML;
}
document.getElementById("content").innerHTML = out;

jsFiddle 示例

Answer 4

可以使用 Jquery 轻松完成：

$('span.note').each(function(){
    $(this).replaceWith($(this).html());
});