Grab element and remove children

Hey,

When you do something like this

var frontPanelDiv = $(".infograph-container .front-panel")[0];

You get this in the console when you log it:
https://www.screencast.com/t/iIbPWfABdsdP

So then you do this

frontPanelDiv.innerHTML="";

Which gives you this
https://www.screencast.com/t/ZrtNqvRZ8t

However, that removes the elements on the page. Is there any way, without cloning the element on the page, to just grab that parent element and ignore the children inside?

Are you just trying to remove the wrapper div and leave the children intact?

Basically this will be a part of a function where in mobile, I need those $(“.stat”)'s to not have the <div class="fsElementContent"> OR the wrapper $(“.front-panel”)…however on non mobile I will need those wrapper parents.

The goal is to “remember” the parent wrapper element so I can properly wrap/unwrap

I’ve not tried anything like that, but you should be able to

  1. Save the children to a variable
  2. Delete the parent
  3. Re-attach the children to whatever their new parent is going to be

That said, I’m just wondering whether you should use JS to remove any unwanted ID’s or classes from the parent div, at which point it shouldn’t (says hesitantly) affect your mobile layout.

I will need the IDs remembered since that’s how our CMS interacts with our elements and remembers what to do with them (move, delete, etc).

Looking back at the ID problem (which is why I didn’t want to clone)…I could just save the classes / ID as variables…I know it’ll always be a <div>…probably a better option.

Yep. Got it working. Thanks!

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.