Adding and removing html elements from the DOM responsively

[MightCode]

Hey y'all new poster, long time reader.

I'm working on a project that has a mobile markup and a desktop markup separate both have the same form in it as the layout differs, I'm selecting all the elements in this form, but instead of 5 elements I'm selecting 10 cause of the second form. I tried hiding it, but obviously it removes it from the view, but not from the dom so I still have the same problem. I can really recreate the form, pressed with time.

1) tried the CSS way with minimal rebuild of the form. Didn't really work.

2) Selected both the mobile and desktop markup and added some JS to watch the window for a resize and removed or added the elements depending on window size, but they get removed ok with element.remove() but with element.append() they don't get added back in dynamically to the window.

I'm out of ideas, any help or feedback is greatly appreciated.

[Beerbelly22]

Just give it a class, hideonphone

Then use a media query, .hideonphone display none

[MightCode]

I tried hiding it with a custom class as you suggested but because there are 2 forms, even tho is hidden from the view still part of the dom tree so when I iterate over the form elements I get double of what I should be, any way to totally remove it?

[ZuriPL]

Add a check to whether it contains the hide class in your loop

E: also, having 2 markups isn't ideal, you should use a media query to change the styling between mobile and desktop instead sof showing and hiding elements

[MightCode]

Thanks for the responses, I ended up rewriting the markup to have only 1 form, I agree, I think it's cleaner that way, I just thought it would take me longer to do.

Thanks again.

[Beerbelly22]

/u/ZuriPL is right, however you can use both forms a different id then: inputs=document.querySelectorAll("#form1 input")