jquery 删除div而不删除其内容在普通JavaScript [重复]

vd8tlhqk  于 2023-10-17  发布在  jQuery
关注(0)|答案(3)|浏览(117)

此问题已在此处有答案

How to remove only the parent element and not its child elements in JavaScript?(13个回答)
六年前就关门了。
有人能帮助我如何删除div标签而不删除JavaScript中的内容吗?
这是我的html,我需要删除所有的div标签:

<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>
wribegjk

wribegjk1#

使用纯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>

使用jQuery unwrap()

$(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>
wmvff8tz

wmvff8tz2#

使用iterable nodelistsreplaceWith等尖端技术,使用普通DOM API非常简单:

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

ou6hu8tu3#

可以使用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>

相关问题