删除 Chrome DevTools 中的 HTML 元素而不删除其子元素？答案

【问题标题】：Delete HTML element in Chrome DevTools without deleting its children?删除 Chrome DevTools 中的 HTML 元素而不删除其子元素？
【发布时间】：2017-05-10 14:50:44
【问题描述】：

我正在尝试在某人的网站上使用 Chrome DevTools 来清理他们的代码并使事情看起来像他们所要求的那样。

到目前为止，我无法在不删除其子元素的情况下删除 HTML 元素（我右键单击要删除的 <div> 并单击 'delete element' - 但这也会删除其中的所有子元素）。

但是，我只想删除外部 <div> 包装，因为它是多余且不必要的（代码无缘无故地在 div 内部的 div 中混杂了 div）。当我双击<div> 并使用删除键删除它时，我无法移除外部胡萝卜，当我点击退出时，<div> 重新出现。

我几乎可以肯定我错过了一个简单的步骤 - 有人能指出我正确的方向吗？

【问题讨论】：

为什么不右击编辑 HTML？这样您就可以只删除不需要的代码部分。

标签： html google-chrome google-chrome-devtools

【解决方案1】：

右键单击要删除的 div 并选择“编辑为 html”。删除不需要的行，然后在可编辑区域外单击以将其关闭。

【讨论】：

【解决方案2】：

右键单击元素，选择编辑为 HTML，删除开始和结束标记，然后保存。这应该将子元素自动移出它并自动移入其父元素。删除元素总是也会删除它的子元素；双击它只能让你编辑它的标签名称，而不是它的整个标记。

【讨论】：

您也可以简单地将子节点拖出父节点，然后在可行的情况下删除空父节点（可能不会在有很多子节点的情况下）。在大多数情况下，无论哪种方式编辑为 HTML 都是最好的选择，这就是为什么我将其添加为评论而不是答案的原因。
非常感谢。给@trevor 接受了答案，因为他比你早了几分钟（然后他删除并重新发布，这就是为什么他现在在 1 分钟之后）。如果我可以给两个我会的，但你的代表看起来不太需要哈哈。谢谢你
@Kyle Vassella：没什么大不了的，他没有转发他的答案，所以他仍然是第一个 :)
@Kyle Vassella 如果你愿意，我很高兴你给 BoltClock 接受的答案，因为他的解释更深入。
@BoltClock 感谢您的酷炫，让 stackoverflow 成为一个友好的闲逛场所。