Removing divs without removing their content in plain Javascript

Question

Could anyone help me on how I can remove div tags without removing their content in JavaScript?

This is my html from which I need to remove all div tags:

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

Expected output would be like shown below.

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

@Dij Why edit "plain javascript" into the title when the question is tagged [jquery]? — CodesInChaos, Jul 06 '17 at 08:39
@CodesInChaos that has been tagged by OP but in one of the comments OP said, he can't use jQuery, so the title is more appropriate — Dij, Jul 06 '17 at 08:45

Alive to die - Anant · Accepted Answer · 2017-07-06T09:43:31.127

1.Using pure 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.You can use jQuery unwrap() also:-

$(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()` is much nicer than `div > *`. +1 – Phil Jul 06 '17 at 04:49 — Phil, Jul 06 '17 at 04:49
@Phil thanks for points. – Alive to die - Anant Jul 06 '17 at 04:51 — Alive to die - Anant, Jul 06 '17 at 04:51
@AlivetoDie cannot use jquery :-( – Umair Zahid Jul 06 '17 at 05:15 — Umair Zahid, Jul 06 '17 at 05:15
@UmairZahid check once my edited solution – Alive to die - Anant Jul 06 '17 at 06:20 — Alive to die - Anant, Jul 06 '17 at 06:20

score 5 · Answer 2 · answered Jul 06 '17 at 07:43

5

Using cutting edge technology such as iterable nodelists and replaceWith, it's really straightforward with the plain DOM API:

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

answered Jul 06 '17 at 07:43

Bergi

630,263
148
957
1,375

3

+1 However, you should mention directly in your post that this is not just _cutting edge_ but _experimental_ technology, with **very limited browser compatibility** thus far. Good answer nevertheless. – Søren D. Ptæus Jul 06 '17 at 08:02

Dij · Answer 3 · 2017-07-06T06:43:38.770

you can use unwrap function.

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

If you want to do in plain javascript. You can get a list of all divs using document.getElementsByTagName("div"), but you will need to unwrap these divs in reverse order. This is a nodelist so reverse() will not work on it, so you can first use [].slice.call() on it which gives you an array and then you can reverse it. Then in the array unwrap each element.

you can do something like this:

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>

Removing divs without removing their content in plain Javascript

3 Answers3