Javascript 删除子元素但保留其内容_Javascript

Javascript 删除子元素但保留其内容

javascript

Javascript 删除子元素但保留其内容,javascript,Javascript,在onclick事件期间删除strong元素的最佳方法是什么 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> </head> <body> <span onclick="testfx();"><strong>Test without styles</strong>

在onclick事件期间删除

strong

元素的最佳方法是什么

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
    <span onclick="testfx();"><strong>Test without styles</strong></span>
</body>
</html>
<script type="text/javascript">
    function testfx() { alert('test'); }
</script>


无标题页
无样式测试
函数testfx（）{alert（'test'）；}

您应该在脚本文件而不是HTML中处理（javascript）事件。它会帮助你

将功能（“行为层”）与网页的结构/内容和介绍
避免传统JavaScript问题的最佳实践编程（如浏览器不一致和缺乏可扩展性）
逐步增强以支持可能不支持的用户代理高级JavaScript功能

你可以试试这个

var x = document.getElementById("test");
var y = document.getElementById("testChild");
x.addEventListener('click', function () {
    this.removeChild(y);
});

编辑

如果你只是想消除“强”效应，那么就这样做吧

var x = document.getElementById("test");
var y = document.getElementById("testChild").innerHTML;
x.addEventListener('click', function () {
    this.innerHTML = y;
});

好吧，这里是：

（其中，

el

是您的跨度）。请注意一件非常重要的事情：您不应该在html中混合使用javascript。这在各个方面都是不好的，你可以通过谷歌搜索“关注点分离”和“低调的javascript”来了解原因。

如果你只想删除标签（并保留文本），你可以选择

span

，然后使用

execCommand（'removeFormat'）

。请对你的问题提供更详细的解释。如果您想在保留内容的同时删除

strong

元素，请查看。我认为您应该更改标题以获得更通用的上下文，以便人们更容易找到此内容。。类似于“删除子元素但保留其内容”。。差不多吧。只是一个提示。我想保留内容。在这种情况下，请查看我在评论中链接的

unwrap

函数。+1了解3个有用的提示（每个人都应该遵循）“您应该在脚本文件中处理（javascript）事件”。你的意思是在脚本文件或脚本元素中，对吗？@badZoke“我的意思是，在单独的文件中：”。那么请接受这个-1。使用脚本元素是完全可以接受的，当然可以接受，但我相信如果可能的话，通常最好使用外部工作表，因此在这种情况下不推荐脚本元素是非常有意义的。至少为了便于开发，将语言分开似乎很直观，更不用说在多个页面上使用脚本的好处了。@DACrosby打开任何重要的网站源代码（例如SO）：您将看到脚本元素。有时最好保持简单，避免加载额外的文件。如果

toRemove

有多个子项或零子项，该怎么办？也许

while（toRemove.firstChild）{el.appendChild（toRemove.firstChild）；}

？@MikeSamuel我同意这不是这个问题的一般解决方案。我会加上，因为这是一个有用的案例，谢谢。

el.addEventListener('click', function () {
    var toRemove = this.getElementsByTagName('strong')[0];

    if (!toRemove) {
        return;
    }

    while (toRemove.firstChild) {
        el.appendChild(toRemove.firstChild);
    }
});