jQuery iFrame manipulation

Question

I'm facing a problem while working with iFrames. What I need to do is, get the contents of a division 'contents' , display it in an iframe, and then remove all forms/form elements ONLY in that iframe. When i use $("#form").remove(), it removes the form both in iframe and in the window. Can someone help?

Thank You.

Answer 1

Do both the forms have the same id (#form)?

Give them separate ids (eg: <form id="inner"> and <form id="outer">) and you should be able to target them individually: $(#inner).remove()

Answer 2

You can wrap the iframe in a DIV with an ID and remove forms only inside of that. Can you post some code? Would be easier to work off that. Or just grab the iframe (although I'm not sure it will work, haven't tested it).

$("iframe").find("#form").remove();

Answer 3

I don't know it in jQuery but I think that this in strait javascript might help you.

var forms = document.getElementById('iframe_id').getElementsByTag('form')
for (var form in forms) {
    forms[form].parent.removeChild(forms[form])
}

Disclaimer: I havn't tested this code, but with some debugging it should work... eventually. I just put it here so you maybe can guess to what you need to to do.

Perhaps the jQuery (now I'm just guessing) that you need is something like:

$('iframe_id').('#form').remove()

Or maybe dlabaeb's code already posted.