Javascript replace parent html (remove child)

Question

I would like loop each iframes tags I've on my page and replace them all with a new div and on the way delete also the parent content so the new div will be the only child:

<div id="parent">
   <p>this is parent content</p>
   <iframe src="http://www.example.com" id="iframe10"></iframe>
</div>

Result should be:

<div id="parent">
   <div id="newdiv">this is new div</div>
</div>

Here is my code for looping all iframes on page, the problem I don't understand how I can access each iframe parent and delete its contents:

        var i, frames;
        frames = document.getElementsByTagName("iframe");
        for (i = 0; i < frames.length; ++i)
        {           
            frame_id = frames[i].id;
        }

Thanks Shai

ibrahim mahrir · Answer 1 · 2017-02-08T12:20:35.507

1

var i, frames;
frames = document.getElementsByTagName("iframe");
for (i = frames.length; i; --i) // the array-like object shrinks every time a frame is removed so we have to loop backwards
{           
    //frame_id = frames[i].id;
    // get the parent element
    var parent = frames[i].parentElement;
    // empty it (remove all it's elements)
    while(parent.firstChild)
        parent.removeChild(parent.firstChild);

    // add the new div
    var div = /* create new div */;
    parent.appendChild(div);
}

edited Feb 08 '17 at 12:20

answered Feb 05 '17 at 09:24

ibrahim mahrir

31,174
5
48
73

@S.Serp why? what's the problem? – ibrahim mahrir Feb 05 '17 at 10:09
the frames[i] in for-loop will skip some items as frames.length will be changed when you remove some item from it... check my answer and use its [Copy snippet to answer] button there to play with it.. – S.Serpooshan Feb 05 '17 at 10:12
@S.Serp Fixed it thanks! Funny thing is I just had a conversation with @TheRealMrCrowley about a similar topic (the use of `.pop` inside a loop) this morning. [**here**](http://stackoverflow.com/questions/42047675/looping-over-an-array-and-pushing-data-to-another-array/42047710?noredirect=1#comment71268579_42047710) is the conversation. It's really hard to notice things like that indeed! – ibrahim mahrir Feb 05 '17 at 10:30

S.Serpooshan · Accepted Answer · 2017-02-05T10:03:38.303

you can write it as following:

function remove_frames() {
  var i = 0;
  var frames = document.getElementsByTagName("iframe");
  while (frames.length > 0) {
    var f = frames[0];
    var p = f.parentElement;
    if (p) {
      while (p.children.length > 0) {
        p.children[0].remove();
      }
      p.innerHTML = "<div id=\"newdiv" + i + "\">this is new div" + i + "</div>";
      i++; //increase id index
      //p.appendChild(
    }
  }
}

  <p><input type="button" value="Execute" onclick="remove_frames()" /></p>

  <div id="parent">
    <p>this is parent content</p>
    <iframe src="http://www.example.com" id="iframe10"></iframe>
  </div>

  <p style="color:#6595ee">This element does not contain any sibling IFrame and must be exist in final result!</p>

  <div id="parent2">
    <p>this is parent2 content...</p>
    <div>another element</div>
    <iframe src="http://www.example.com" id="iframe20"></iframe>
    <p>another element after iframe.</p>
  </div>

I think he want to remove all the element inside the parent not just the iframes. Check his example in the question! — ibrahim mahrir, Feb 05 '17 at 09:28
@ibrahimmahrir code updated and checked, i think it works as requested — S.Serpooshan, Feb 05 '17 at 10:05

score 0 · Answer 3 · answered Feb 05 '17 at 09:24

0

You could use the parentElement

var iframes = document.getElementsByTagName("iframe");
iframes[0].parentElement.innerHTML = `<div id="newdiv">this is new div</div>`;

<div id="parent">
   <p>this is parent content</p>
   <iframe src="http://www.example.com" id="iframe10"></iframe>
</div>

answered Feb 05 '17 at 09:24

acesmndr

8,137
3
23
28

You should use this ' not this ` (if you could see the difference)! – ibrahim mahrir Feb 05 '17 at 09:26
@ibrahimmahrir I see the difference. It's just that I'm used to es6 syntax and the template strings. – acesmndr Feb 05 '17 at 09:30

Vladu Ionut · Answer 4 · 2017-02-05T10:37:57.753

0

You can use Node.parentNode to get the parent and Node.removeChild or Element.innerHTML to delete the content.

var i, frames;
  frames = document.getElementsByTagName("iframe");
  for (i = frames.length-1; i >=0; i--) {
    var frame = frames[i];
    if (frame.parentNode) {
      var parent = frame.parentNode;
      while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
      }
    }

  }

<div id="parent">
   <p>this is parent content</p>
   <iframe src="http://www.example.com" id="iframe10"></iframe>
</div>

edited Feb 05 '17 at 10:37

answered Feb 05 '17 at 09:27

Vladu Ionut

8,075
1
19
30

this code also does not work as i said, `frames[i]` in for-loop will skip some items as frames.length will be changed when you remove some item from it! check my answer – S.Serpooshan Feb 05 '17 at 10:17
@S.Serp Actually I think you're wrong about this! We are not removing directly from the array so it's length is not changing at all. – ibrahim mahrir Feb 05 '17 at 10:39
@ibrahimmahrir if you debug the js code, you will see when we call removeChild for parent of iframes, we actually remove them from the frames array! (check frames.length and frames[0] after first loop) – S.Serpooshan Feb 05 '17 at 10:44
@S.Serp not removing them from the array but removing them from the memory. The array will still have a reference to that space in memory (that points out to nothing) but the array is never changed. If the array is `[iframe1, iframe2, iframe3]` then after removing the first iframe it will become `[undefined, iframe2, iframe3]` not `[iframe2, iframe3]` as you suggested. The array will always have the length 3. You can log it at each iteration to verify what I just said! – ibrahim mahrir Feb 05 '17 at 10:48
@ibrahimmahrir no, as i said, the frames.length decreases when we remove items from it! this is because its of type `HTMLCollection` and DOM collections are typically live, i.e. any changes to the DOM are reflected in the collections! – S.Serpooshan Feb 08 '17 at 11:27
@S.Serp Have tried the code? Last time we were having this conversation (about 2 or 3 years ago) I tried it and as I said the array doesn't shrink. It's just that the references inside the array will point undefined things! – ibrahim mahrir Feb 08 '17 at 11:30
@ibrahimmahrir : yes, i have tried it and sure, what about you?! please see this fiddle: https://jsfiddle.net/u4n4vuua/ its not a normal js array, its of type `HTMLCollection`. also the conversation was not for 2-3 **years** ago but 2-3 **days** ago ;D – S.Serpooshan Feb 08 '17 at 12:04
@S.Serp That's really weird! last time I tried it, it was working ok, but maybe because of the browser console. So I'll change my answer to its previous edition. (**NOTE:** the 2 - 3 years thing was a joke for guard sake!). So I was wrong, thanks for correcting me (**WITH EXAMPLES**). – ibrahim mahrir Feb 08 '17 at 12:18

Javascript replace parent html (remove child)

4 Answers4