CODEWITHSUNDEEP
javascriptdom
jelly46
jelly46

Reputation: 243

Manipulate via DOM

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>

Upvotes: 0

Views: 97

Answers (3)

aksu
aksu

Reputation: 5235

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;

Upvotes: 1

aebabis
aebabis

Reputation: 3705

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');

Upvotes: 1

Stefano Ortisi
Stefano Ortisi

Reputation: 5326

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

Upvotes: 3

Related Questions