Manipulate via DOM

Question

I want to remove some html as I don't actually have access to the HTML file. This is because it is a CMS so would it be possible to manipulate code via DOM?

Here is a code sample I have just written, how do I remove the frmMain [first form tag] but keep second from tag via DOM?

I know you cannot nest a <form> within a <form>.

<form id="frmMain" >

<form class="2ndform"></form> 

</form>

The browser cannot generate invalid DOM trees so as soon as you're able to manipulate it with JavaScript, your HTML has already been fixed (to the browser's discretion). In most browsers you can verify the fix applied with the HTML developer tool. — Álvaro González, Feb 17 '14 at 17:16
possible duplicate of [How to remove only the parent element and not its child elements in JavaScript?](http://stackoverflow.com/questions/170004/how-to-remove-only-the-parent-element-and-not-its-child-elements-in-javascript) — Madara's Ghost, Feb 17 '14 at 17:16
Since forms are not supposed to be inside other forms, browsers may handle that HTML differently. Assuming that HTML actually is actually treated as nested, you can use jQuery and do `$('#2ndform').unwrap();` — aebabis, Feb 17 '14 at 17:17
Could you please clarify? You say you know you can't nest forms, but your example has nested forms. Does the CMS code have nested forms? If it does, how do you know? If it doesn't, could you make your example more closely resemble the actual situation? Thanks. — aebabis, Feb 17 '14 at 17:43
@acbabis Yes my example has a form within a form the CMS i work with has a form tag [by default] on every pages that is created. I've been commissioned to work with an external agency and page has an iframe that has a embeded tags and I want to removed the parent tag via the DOM — jelly46, Feb 18 '14 at 10:42

score 3 · Accepted Answer · edited May 23 '17 at 12:29

3

You can save the reference of the second form:

var second_form = $( '.2ndform' ).remove()

Then remove the first form

$( '#frmMain' ).remove()

and finally reappend the second form wherever you want

$( '.other_wrapper' ).append( second_form );

As a last notes:

you CAN'T have html classes starting with a number. See this
you CAN'T have nested form. See this

edited May 23 '17 at 12:29

Community

1
1

answered Feb 17 '14 at 17:15

Stefano Ortisi

5,288
3
33
41

Thanks Stefano the class will not start with a number and I know i can't have form within a form, this is the issue that i have. – jelly46 Feb 17 '14 at 17:26
Yes @jelly46, I imagined that class name was just an example and you couldn't have control of the html structure. But for the answer's sake I thought it was good point that out. – Stefano Ortisi Feb 17 '14 at 17:28
hello, this didn't work for I seem to be going wrong somewhere. – jelly46 Mar 04 '14 at 12:52

aksu · Answer 2 · 2014-02-17T17:55:42.693

1

Use .unwrap:

$('.2ndform').unwrap();

Docs

Or plain JavaScript:

var el = document.getElementById('frmMain');
var newcontent = el.outerHTML.replace(el.outerHTML, el.innerHTML);

document.body.innerHTML = newcontent;

edited Feb 17 '14 at 17:55

answered Feb 17 '14 at 17:18

aksu

5,221
5
24
39

score 1 · Answer 3 · answered Feb 17 '14 at 17:38

As already mentioned, you cannot have a form inside a form. When the browser parses the HTML, it will fix it to the best of its ability. This behavior is unspecified and is not necessarily the same cross-browser. Because I was curious, I made this:

<form id="frmMainA">
    <form class="2ndForm">
    </form>
</form>
<form id="frmMainB">
    <form class="2ndForm">
        <input type="text"/>
    </form>
</form>
<form id="frmMainC">
    <input type="text"/>
    <form class="2ndForm">
        <input type="text"/>
    </form>
</form>

When run in Chrome, it spits out this:

<form id="frmMainA">
 </form>

<form id="frmMainB">
    <input type="text">
</form>

<form id="frmMainC">
    <input type="text">
    <input type="text">
</form>

It did the same thing in FF and IE10. This means that when JS is running in modern browsers, you will only have #frmMain and there won't be any .2ndForm to unwrap. If you need the form to have the class .2ndForm, you can add it to #frmMain.

var form = document.getElementById('frmMain');
form.className = form.className + ' 2ndForm');

Or

$('#frmMain').addClass('2ndForm');

Manipulate via DOM

3 Answers3