删除div而不用纯Javascript删除它们的内容[重复]答案

【问题标题】：Removing divs without removing their content in plain Javascript [duplicate]删除div而不用纯Javascript删除它们的内容[重复]
【发布时间】：2017-07-06 04:38:26
【问题描述】：

谁能帮助我如何删除div 标签而不删除JavaScript 中的内容？

这是我需要从中删除所有 div 标签的 html：

<div id="id1" class="someclass">
  <p>some text
    <label> Test content </label>
  </p>
  <div id="id2" style="overfolw:scroll">
    <span>some text</span>
    <div id="level3">
      <label> Test content </label>
      <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
    </div>
  </div>
</div>

预期的输出如下所示。

<p>some text
   <label> Test content </label>
</p>
<span>some text</span>
<label> Test content </label>
<a href=https://twitter.com/realDonaldTrump/status/882186896285282304 target=_blank rel=noopener>creepiness</a>

【问题讨论】：

api.jquery.com/unwrap
@Dij 为什么在问题被标记为 [jquery] 时将“plain javascript”编辑到标题中？
@CodesInChaos 已被 OP 标记但在其中一个 cmets 中 OP 说他不能使用 jQuery，所以标题更合适

标签： javascript jquery html dom

【解决方案1】：

1.使用纯java-script：-

var divs=document.getElementsByTagName('div');
var counter = divs.length-1;
for(i=counter;i>=0;i--){
 divs[i].outerHTML = divs[i].innerHTML;
}

<div id="id1" class="someclass">
  <p>some text
    <label> Test content </label>
  </p>
  <div id="id2" style="overfolw:scroll">
    <span>some text</span>
    <div id="level3">
      <label> Test content </label>
      <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
    </div>
  </div>
</div>

2.你可以使用jQueryunwrap()也：-

$(document).ready(function(){
  $('div').contents().unwrap();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="someclass">
  <p>some text
    <label> Test content </label>
  </p>
  <div id="id2" style="overfolw:scroll">
    <span>some text</span>
    <div id="level3">
      <label> Test content </label>
      <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
    </div>
  </div>
</div>

【讨论】：

contents() 比 div > * 好得多。 +1
@Phil 感谢积分。
@AlivetoDie 不能使用 jquery :-(
@UmairZahid 检查我编辑过的解决方案

【解决方案2】：

使用 iterable nodelists 和 replaceWith 等尖端技术，使用纯 DOM API 非常简单：

for (const div of document.querySelectorAll("div"))
// alternatively: Array.from(document.getElementsByTagName("div"))
    div.replaceWith(...div.childNodes);

【讨论】：

+1 但是，您应该在帖子中直接提及，这不仅仅是尖端，而是实验性技术，非常有限浏览器兼容性到目前为止。不过答案很好。

【解决方案3】：

您可以使用unwrap 函数。

 $('div').children().unwrap();

如果你想用纯 javascript 做。您可以使用document.getElementsByTagName("div") 获取所有 div 的列表，但您需要以相反的顺序打开这些 div。这是一个nodelist，所以reverse() 无法处理它，所以你可以先在它上面使用[].slice.call()，它会为你提供一个数组，然后你可以反转它。然后在数组中展开每个元素。

你可以这样做：

var elements = [].slice.call(document.getElementsByTagName("div"), 0).reverse();
elements.forEach(function(el){
    el.outerHTML = el.innerHTML;
});

<div id="id1" class="someclass">
  <p>some text
    <label> Test content </label>
  </p>
  <div id="id2" style="overfolw:scroll">
    <span>some text</span>
    <div id="level3">
      <label> Test content </label>
      <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
    </div>
  </div>
</div>

【讨论】：